React Native二維碼生成組件

時間 2019-11-08

標籤 react native 二維生成組件欄目 React 简体版

原文原文鏈接

本文原創首發於公衆號：ReactNative開發圈，轉載需註明出處。css

React Native二維碼生成組件：react-native-qrcode，純JS組件，支持安卓和IOS雙平臺，支持中文和英文，能夠自定義尺寸、前景色和背景色。

效果圖

安裝方法

npm install react-native-qrcode --savereact

示例代碼

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