ray-rn-qrcode v1.0.6

ray-rn-qrcode

author

ilex.h

NOTICED

This component ( AmosQrcodeScanner ) is dependent on react-native-camera@0.12.0，then make sure that you have installed android build-tools v 25.0.2, if not, you should use android studio sdk manager intall it.

由于用到 camera 此时需要给 android/app/src/main/AndroidManifest.xml中添加 <uses-permission android:name="android.permission.CAMERA"/>。可选步骤：react-native link or react-native link react-native-camera (如果 react-native-camera失败，则需要执行上述命令，用于加载native源码)。As for why you want to do this, please look up the information by yourself！

Install

# 第一步
npm install ray-rn-qrcode --save

# 第二步（react-native-camera 需要 link 后才能使用）
react-native link

# PS：如果 link 没有成功，会报错。如果没有自动 link，可以手动 link

feature

• supported qrcode and barcode
• suppored IOS and Android
• based on react-native-camera
• Easy custom interface
• generate qrcode

Usage

import { ScannerView } from 'ray-rn-qrcode';
import { Text } from 'react-native';

export default class ScanDemo extends Component {

  barcodeReceived = (e) => {
    alert(`Type: ${e.type}\nData: ${e.data}`);
  }

  render() {
    const topBarView = (
      <Text style={styles.qrcodeView}>顶部标题区域</Text>
    );
    const bottomView = (
      <Text style={styles.qrcodeView}>底部菜单区域</Text>
    );

    const rnCameraProps = {
      // react-native-camera 属性
    };

    return (
      <Container>
        <ScannerView
          onScanResultReceived={this.barcodeReceived}
          topBarView={topBarView}
          bottomView={bottomView}
          rnCameraProps={rnCameraProps}
        />
      </Container>
    );
  }
}

props

感谢

• react-native-camera
• react-native-qrcode-app
• react-native-qrcode

Generate

Use canvas and webview.

Use qr.js to generate qrcode data

Usage

import React, { Component } from 'react';
import {
  View,
  TextInput
} from 'react-native';
import { GenerateQRcode } from 'ray-rn-qrcode';

class GenerateDemo extends Component {
  state = {
    value: 'ray-rn-qrcode'
  };

  onTextChange = (value) => {
    this.setState({ value });
  }

  render() {
    const { value } = this.state;
    return (
      <View>
        <TextInput
          onChangeText={this.onTextChange}
          value={value}
        />
        <GenerateQRcode
          value={value}
          size={200}
          bgColor='black'
          fgColor='white'
        />
      </View>
    );
  }
}

export default GenerateDemo;

Props

License

MIT