React Native二维码生成组件

前端之家收集整理的这篇文章主要介绍了React Native二维码生成组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文原创首发于公众号:ReactNative开发圈,转载需注明出处。

React Native二维码生成组件:react-native-qrcode,纯JS组件,支持安卓和IOS双平台,支持中文和英文,可以自定义尺寸、前景色和背景色。
@H_301_6@效果

@H_301_6@安装方法

npm install react-native-qrcode --save

@H_301_6@示例代码
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

@H_301_6@完整示例

完整代码GitHub - forrest23/ReactNativeComponents: React Native组件大全,介绍React Native常用组件的使用方法和使用示例
本次示例代码在 Component09文件夹中。请不要吝啬你们的Star

@H_301_6@组件地址

GitHub - cssivision/react-native-qrcode: a minimalist qrcode component for react-native

微信不让跳转外链,可以点击查看原文来查看外链GitHub内容

欢迎关注我的微信公众号:ReactNative开发圈

原文链接:https://www.f2er.com/react/301779.html

猜你在找的React相关文章