React native 单击按钮后如何在react native中下载生成的Qrcode
//这是生成二维码的示例代码// //在我们的代码中导入react //导入所有基本组件 //TextInput的默认值 //函数从输入中获取值 //并将值设置为QRCode //二维码的颜色(可选) //二维码的背景色(可选) //二维码中心的标识(可选) //点击后会下载生成的二维码React native 单击按钮后如何在react native中下载生成的Qrcode,react-native,React Native,//这是生成二维码的示例代码// //在我们的代码中导入react //导入所有基本组件 //TextInput的默认值 //函数从输入中获取值 //并将值设置为QRCode //二维码的颜色(可选) //二维码的背景色(可选) //二维码中心的标识(可选) //点击后会下载生成的二维码 import React, {Component} from 'react'; import { StyleSheet, View, TextInput, TouchableOpacity,
import React, {Component} from 'react';
import {
StyleSheet,
View,
TextInput,
TouchableOpacity,
Text,
} from 'react-native';
import QRCode from 'react-native-qrcode-svg';
class App extends Component {
constructor() {
super();
this.state = {
inputValue: '',
valueForQRCode: '',
};
}
getTextInputValue = () => {
this.setState({valueForQRCode: this.state.inputValue});
};
render() {
return (
<View style={styles.MainContainer}>
<QRCode
value={this.state.valueForQRCode ? this.state.valueForQRCode : 'NA'}
//size of QR Code
size={250}
color="black"
backgroundColor="white"
/>
<TextInput
style={styles.TextInputStyle}
onChangeText={(text) => this.setState({inputValue: text})}
underlineColorAndroid="transparent"
placeholder="Student ID"
/>
<TouchableOpacity
onPress={this.getTextInputValue}
activeOpacity={0.7}
style={styles.button}>
<Text style={styles.TextStyle}> Generate QR Code </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,
},
});