问题描述
通过使用此代码，我可以生成二维码，但是，我不知道如何在长按或自动时以 png/jpeg 格式保存该二维码。 我需要一些帮助或想法来解决这个问题。我尝试了几个例子，但没有成功。 我一直在努力。
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, View, TextInput, TouchableOpacity, Text,} from 'react-native';
// import all basic components
import QRCode from 'react-native-qrcode-svg';
//import QRCode
class App extends Component {
svg;
constructor() {
super();
this.state = {
inputValue: '',
inputValue2: '',
// Default Value of the TextInput
valueForQRCode: '',
// Default value for the QR Code
};
}
getTextInputValue = () => {
// Function to get the value from input
// and Setting the value to the QRCode
this.setState({ valueForQRCode: this.state.inputValue + this.state.inputValue2 });
};
shareQR =() =>{
this.svg.toDataURL((data) => {
const shareImageBase64 = {
title: "QR",
message: "Ehi, this is my QR code",
url: `data:image/png;base64,${data}`
};
Share.open(shareImageBase64);
});
}
render() {
return (
<View style={styles.MainContainer}>
<QRCode
value={"Abhigyan" + this.state.valueForQRCode}
//Setting the value of QRCode
size={250}
//Size of QRCode
bgColor="#000"
//Backgroun Color of QRCode
fgColor="#fff"
//Front Color of QRCode
getRef={(ref) => (this.svg = ref)}
onPress={() =>{shareQR()}}
/>
<TextInput
// Input to get the value to set on QRCode
style={styles.TextInputStyle}
onChangeText={text => this.setState({ inputValue: text })}
underlineColorAndroid="transparent"
placeholder="Enter text to Generate QR Code"
/>
<TextInput
// Input to get the value to set on QRCode
style={styles.TextInputStyle}
onChangeText={text => this.setState({ inputValue2: text })}
underlineColorAndroid="transparent"
placeholder="Enter text to Generate QR Code"
/>
<TouchableOpacity
onPress={this.getTextInputValue}
activeOpacity={0.7}
style={styles.button}>
<Text style={styles.TextStyle}> Generate QR Code </Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}onPress={this.shareQR}>
<Text style={styles.buttonText}>Share</Text>
</TouchableOpacity>
</View>
);
}
}
export default App;
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
margin: 10,
alignItems: 'center',
paddingTop: 40,
},
TextInputStyle: {
width: '100%',
height: 40,
marginTop: 20,
borderWidth: 1,
textAlign: 'center',
},
button: {
width: '100%',
paddingTop: 8,
marginTop: 10,
paddingBottom: 8,
backgroundColor: '#F44336',
marginBottom: 20,
},
TextStyle: {
color: '#fff',
textAlign: 'center',
fontSize: 18,
},
});
//谢谢 。 // 在二维码中我可以生成二维码扫描器我已经完成了，但是如何下载/保存或共享该二维码，请帮忙
1楼
该答案参考了问题评论中所写的 react-native-qrcode-svg 库。
使用这个库，您可以创建一个 svg 来显示您想要的 QR，然后通过引用访问它。 因此，在您的组件中创建一个引用：
class App extends Component {
svg;
constructor() {
...
};
}
...
}
为其分配二维码，例如：
<QRCode
value={"Abhigyan" +this.state.valueForQRCode}
size={250}
color="#fff"
getRef={(ref?) => (this.svg = ref)}
/>
现在您可以使用this.svg.toDataURL(//callback)访问其内容。
示例：您想通过单击调用此函数的按钮，使用 react-native-share 将 QR 共享为图像/png：
shareQR() {
this.svg.toDataURL((data) => {
const shareImageBase64 = {
title: "QR",
message: "Ehi, this is my QR code",
url: `data:image/png;base64,${data}`
};
Share.open(shareImageBase64);
});
}
这只是一个例子，如果你更喜欢使用 react-native-fs 你可以参考官方仓库中给出的。
更新以支持 onPress 功能
您正在尝试将 onPress 道具传递给QRCode ，但QRCode不支持它。
相反，将其包装在TouchableOpacity ：
<TouchableOpacity onPress={this.shareQR}>
<QRCode
value={"Abhigyan" +this.state.valueForQRCode}
size={250}
color="#fff"
getRef={(ref?) => (this.svg = ref)}
/>
</TouchableOpacity>
2楼
您可以使用创建二维码图像，然后将其保存在相机胶卷或磁盘存储中。