React Native二维码生成组件

forrest23

发布于 2018-08-03 15:22:52

1K0

发布于 2018-08-03 15:22:52

文章被收录于专栏：React Native开发圈

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

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

效果图

安装方法

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>
    );
  }
}