React 本机共享通过共享视图显示"无法发送空消息"错误热

Question

我正试图在whatsapp上共享一个生成的二维码作为视图快照。我使用了react native view shot和react nativeqrcode svg来处理这件事，如下所示：

import React, { useState, useRef } from 'react';
import { StyleSheet, Text, ScrollView, TextInput, TouchableOpacity, Alert, View, Share } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import ViewShot from 'react-native-view-shot';
const App = () => {
const viewShotRef= useRef();
async function captureViewshot(){
const imgURI = await viewShotRef.current.capture();
Share.share({title: 'image', url: imgURI});
}
const [qr, setQr] = useState(false);
const [link, setLink] = useState('');
const createQr = () => {
if (link) {
setQr(true);
} else {
Alert.alert(
'Error',
"Please insert required field"
);
}
};
return (
<ScrollView style={styles.container}>
<Text style={styles.headerTitle}>Create QR Code</Text>
<View style={{flexDirection:'row'}}>
<TextInput
style={styles.input}
placeholder="Insert link here.."
onChangeText={(link) => setLink(link)}
/>
</View>
<TouchableOpacity style={styles.button} onPress={() => createQr()}>
<Text style={styles.buttonTitle}>Create</Text>
</TouchableOpacity>
{qr && (
<ViewShot ref={viewShotRef} style={styles.qrcontainer} options={{format:'jpg', quality: 0.8, result:'base64'}}>
<View><QRCode value={link} size={250} />
<Text
style={{
alignSelf: 'center',
fontSize: 15
}}>
{link}
</Text></View></ViewShot>
)}
{qr && (
<View>
<TouchableOpacity style={styles.button} onPress={captureViewshot}>
<Text style={styles.buttonTitle}>Share QR Code</Text>
</TouchableOpacity>
</View>
)}
</ScrollView>
);
}; export default App;

然而，当我点击共享按钮时，应用程序一直没有发送错误消息。如何修改代码，以便在其他平台上共享我的视图快照(二维码(？

谢谢你的指导。

Answer 1

您可以使用rn qr生成器生成qr图像(示例(。然后将生成的QR图像的base64作为url参数

RNQRGenerator.generate({
...
base64: true, // set true to get base64 representation of the image
})
.then(response => {
const { base64 } = response;
const shareOptions = {
type: 'image/jpg',
title: 'image',
message: 'message'
url: base64
};
Share.open(shareOptions)
.then(res => console.log(res))
.catch(err => console.error(err));
})