• This article is Marno original, reprint must retain source!
  • Public account aMarno, after concern reply RN to join the exchange group
  • React Nativewww.marno.cn

1. Introduction

Recently, I wrote a copy of ofo app with React Native, which involves the QR code scanning function. I searched Github, but I didn’t find a qr code scanning component, so I wrote one myself.

The function of using the camera to scan two-dimensional code in real time for parsing has been realized through the react-Native Camera library, so I just wrote a scanning interface that can be customized. For convenience, I have packaged it into components and uploaded it to the NPM server. The following is about the implementation process and the use of methods.

2. The characteristics of

  • Compatible with RN0.4.0+ version
  • Compatible with Android and iOS platforms
  • Supports qr code and bar code scanning
  • Easy to achieve a variety of scanning interface

3. Preview screenshots

Twitter WeChat OFO
QQBrowser Gif1 Gif2

4. Install

// NPM install ac-qrcode –save // NPM install ac-qrcode –save // If no automatic link is available, you can manually link

Basic use

import { QRScannerView } from 'ac-qrcode';

export default class DefaultScreen extends Component {
    render() {
        return (
            < QRScannerView
                onScanResultReceived={this.barcodeReceived.bind(this)}
                renderTopBarView={()= > this._renderTitleBar()}
                renderBottomMenuView={() => this._renderMenu()}
            />
        )
    }

    _renderTitleBar(){
        return(
            <Text
                style={{color:'white',textAlignVertical:'center', textAlign:'center',font:20.padding:12}}
            >I'll add a title here</Text>
        );
    }

    _renderMenu() {
        return (
            <Text
                style={{color:'white',textAlignVertical:'center', textAlign:'center',font:20.padding:12}}
            >Add the bottom menu here</Text>
        )
    }

    barcodeReceived(e) {
        Toast.show('Type: ' + e.type + '\nData: ' + e.data);
        //console.log(e)
    }
}Copy the code

6. Property list

The property name type The default value optional describe
maskColor string #0000004D true Mask color
borderColor string # 000000 true Border color
cornerColor string # 000000 true Angle of color
borderWidth number 0 true Border width
cornerBorderWidth number 4 true Corner width
cornerBorderLength number 20 true The length of the Angle of
rectHeight number 200 true Height of scanning mania
rectWidth number 200 true Sweep crazy width
isCornerOffset bool false true Whether the Angle is offset
cornerOffsetSize number 0 true Angular offset
bottomMenuHeight number 0 true Bottom operation menu height
scanBarAnimateTime number 2500 true Speed of scan line movement
scanBarColor string #22ff00 true Scan line color
scanBarImage any null true Use picture scan lines
scanBarHeight number 1.5 true Sweep line height
scanBarMargin number 6 true Scan line distance Scan mad distance
hintText string Put the QR code/bar code into the box,

Can automatically scan		 true Tooltip text
hintTextStyle object { color: ‘#fff’,

fontSize: 14,

backgroundColor:’transparent’}		 true Prompt text style
hintTextPosition number 130 true Prompt text position
isShowScanBar bool true true Whether to display a scan bar
bottomMenuStyle object – true Bottom menu style
renderTopBarView func – flase Draws the top action bar component
renderBottomMenuView func – false Draws the bottom action bar component
onScanResultReceived func – false Scan result callback

7. Implementation brief

Scan interface can be divided into four parts: top title bar, bottom operation bar, mask layer, scan box. Among them, the top title bar and the bottom action bar are exposed to users to add their own. Only the mask layer and scan box are set by passing in parameters. The previous figure Outlines the overall interface structure.

The structure of the component code is as follows, which is basically laid out using an absolutely positioned View

<View>
    <Camera>{/* Top title bar */}<TopBarView />

        <View>{/* Scan box part */}<View>{/* Scan box edges */}<View>{/* Scan bar and animation */}<Animated.View>
                </View>{/* Scan frame corner - upper left */}<View />{/* Scan frame corner - upper right */}<View />{/* Scan frame corner - lower left */}<View />{/* Scan frame corner - lower right */}<View />
            </View>{/* mask - on */}<View />{/* mask - left */}<View />{/* mask - right */}<View />{/* mask - lower */}<View />{/* Prompt text */}<HintTextView />
        </View>{/* Bottom action bar */}<BottomMenuView>
    </Camera>
</View>Copy the code

The detailed code is quite long, so I will not explain it in a list. The main is also relatively simple, feel nothing to say, is to calculate the components on the screen coordinates, the corresponding size Settings. Those interested can go directly to Github at github.com/MarnoDev/AC…

By the way, I would like to remind you that the speed of opening the scan code interface will be a little slow because it has not been optimized yet. Later, I will optimize these details. For details, you can pay attention to my official account, or pay attention to the update of my Github warehouse.

Get more RN dry goods, welcome to pay attention to the public number aMarno. Welcome to an RN group exchange.