本文原创首发于公众号:ReactNative开发圈,转载需注明出处。
React Native二维码生成组件:react-native-qrcode,纯JS组件,支持安卓和IOS双平台,支持中文和英文,可以自定义尺寸、前景色和背景色。@H_301_6@效果图
@H_301_6@安装方法
npm install react-native-qrcode --save
import React,{ Component } from 'react'; import QRCode from 'react-native-qrcode'; import { AppRegistry,StyleSheet,View,TextInput,Dimensions } from 'react-native'; export default class Component09 extends Component { static navigationOptions = ({ navigation }) => ({ title: `${navigation.state.params.name}`,}); state = { text: 'https://github.com/forrest23/ReactNativeComponents',}; render() { return ( <View style={styles.container}> <TextInput style={styles.input} onChangeText={text => this.setState({ text: text })} value={this.state.text} /> <QRCode value={this.state.text} size={200} bgColor="purple" fgColor="white" /> </View> ); } }@H_301_6@主要参数说明
value:二维码的值
size:大小,默认128
bgColor:背景色,默认#000
fgColor:前景是,默认#fff
完整代码:GitHub - forrest23/ReactNativeComponents: React Native组件大全,介绍React Native常用组件的使用方法和使用示例
本次示例代码在 Component09文件夹中。请不要吝啬你们的Star!
GitHub - cssivision/react-native-qrcode: a minimalist qrcode component for react-native
微信不让跳转外链,可以点击查看原文来查看外链GitHub内容。
欢迎关注我的微信公众号:ReactNative开发圈