ray-rn-qrcode

author

ilex.h

NOTICED

This component ( AmosQrcodeScanner ) is dependent on [email protected]，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

|name |type |default |description | |------ |------ |------ |------ | |scanFrameColor |string |rgba(0, 0, 0, 0.3) | 遮罩颜色 | |scanFrameHeight |number | 200 | 扫描框高度 | |scanFrameWidth |number | 200 | 扫描框宽度 | |isCornerOffset | bool |false | 边角是否偏移 | |cornerOffsetSize | number |0 | 边角偏移量 | |cornerColor |string | white | 边角颜色 | |cornerBorderLength | number |20 | 边角长度 | |cornerBorderWidth | number |4 | 边角宽度 | |borderWidth |number | 0 | 边框宽度 | |borderColor |string | white | 边框颜色 | |loading |boolean |false | 显示loading | |loadingColor |string | -- | ActivityIndicator color | |bottomViewHeight | number |0 | 底部操作栏高度 | |scanBarMargin | number |6 | 扫描线距扫描框边距 | |showScanBar | bool |true | 是否显示扫描条 | |scanBarImage | any |null | 使用图片扫描线 | |scanBarColor | string | #F90808 | 扫描线颜色 | |scanBarHeight | number | 1.5 | 扫描线高度 | |scanBarAnimateTime | number | 2500 | 扫描线移动速度 | |hintTextPosition | number | 130 | 提示文字位置 | |hintTextStyle | object | { color: '#fff', fontSize: 14,backgroundColor:'transparent'} | 提示文字样式 | |hintText |string | 将二维码/条码放入框内，即可自动扫描 | 提示文本 | |------|------|------|------| |rnCameraProps |object |- | react-native-camera 属性 | |onScanResultReceived | func | - | 必选，扫描结果回调 | |topBarView | node | element | - | 必选，绘制顶部操作条组件 | |bottomView | node | element | - | 必选，绘制底部操作条组件 | |topExtraInfo | node | element | - | 顶部额外信息 | |bottomExtraInfo | node | element | - | 底部额外信息 | |showLight | boolean | false | 是否显示手电筒图标 | |lightIcon | object： {style: object, source: Image.propTypes.source } | {} | 手电筒图标 | |cameraStyle | object | { flex: 1} | camera样式 |

感谢

• 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

|prop | type | default | Description | |--------|---------|---------|-------------| |value | string | qrcode| qrcode value | |size | number | 128 | area width and height | |bgColor | string (CSS color) | "#000"| background color | |fgColor | string (CSS color) | "#FFF"| front color| |wrapperStyle | object | -- | wrapper view style | |innerStyle | object | -- | inner style ，canvas and webview |

License

MIT