react-native-qrcode使用

最近使用到了React Native生成二维码的问题。
发现react-native-qrcode
github地址 react-native-qrcode

引入

yarn add react-native-qrcode --save

建议不要使用npm install进行安装，会自行删除部分模块，造成麻烦

新建qrcode项目，更改如下

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  TextInput,
  View
} from 'react-native';
import QRCode from 'react-native-qrcode';

export default class App extends Component<Props> {
  state = {
    text: '123456',
  }
  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='pink'
          fgColor='white'/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    margin: 10,
    borderRadius: 5,
    padding: 5,
  }
});

size更改大小
bgColor更改二维码颜色
fgColor更改背景颜色

运行截图

YIY`6(K4V`)521WO@Y3@LPN.jpg

有兴趣可以加入Nodejs交流群，和大佬们一起成长！！！

群号：348108867