React Native二维码生成组件

最新推荐文章于 2024-08-23 08:21:38 发布

weixin_34355559

最新推荐文章于 2024-08-23 08:21:38 发布

阅读量147

点赞数

文章标签：移动开发

原文链接：https://juejin.im/post/5ab0d713f265da2378401bcc

版权

本文原创首发于公众号：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>
    );
  }
}
复制代码