React Native 基於react-native-camera實現掃碼功能

組件庫文檔： https://github.com/react-nati...

安裝

1. npm install react-native-camera --save
2. react-native link react-native-camera

使用最新的穩定版，將你的package.json這樣配置：
"react-native-camera": "git+https://git@github.com/react-native-community/react-native-camera"；

配置（IOS）

若是上一步的link顯示成功，則xcode裏的配置基本完成，若是失敗，能夠手動配置；

手動配置

1.你已經完成 npm install react-native-camera --save；

1. 在XCode中，在項目導航器中右鍵單擊Libraries➜Add Files to [your project's name];
2. 轉到node_modules➜ react-native-camera並添加RNCamera.xcodeproj;
3. 展開RNCamera.xcodeproj➜ Products文件夾;
4. 在XCode中，在項目導航器中選擇您的項目。添加libRNCamera.a到您的項目Build Phases➜Link Binary With Libraries;

1. 點擊RNCamera.xcodeproj項目導航器並轉到Build Settings選項卡。確保「All」開啓（而不是'Basic'）。在該Search Paths部分中，查找Header Search Paths並確保它包含二者$(SRCROOT)/../../react-native/React並將它們$(SRCROOT)/../../../React標記爲recursive。

使用

只需import { RNCamera } from react-native-camera 模塊中 取出<RNCamera/>標籤。

引用標籤：

<RNCamera
         ref={ref => {
             this.camera = ref;
         }}
         style={styles.preview}
         type={RNCamera.Constants.Type.back}
         flashMode={RNCamera.Constants.FlashMode.on}
         onBarCodeRead={this.onBarCodeRead}
         >  
</RNCamera>

屬性

autoFocus

值：（RNCamera.Constants.AutoFocus.on默認）或RNCamera.Constants.AutoFocus.off

使用該autoFocus屬性指定相機的自動對焦設置。
RNCamera.Constants.AutoFocus.on將其打開，RNCamera.Constants.AutoFocus.off將其關閉。

flashMode

指定相機的閃光模式
值：（RNCamera.Constants.FlashMode.off默認）RNCamera.Constants.FlashMode.on；

onBarCodeRead

檢測到條形碼時，將調用指定的方法；
事件包含data（條形碼中的數據）和type（檢測到的條形碼類型）

繪製掃碼界面

代碼：

render() {
       return (
           <View style={styles.container}>
               <RNCamera
                   ref={ref => {
                       this.camera = ref;
                   }}
                   style={styles.preview}
                   type={RNCamera.Constants.Type.back}
                   flashMode={RNCamera.Constants.FlashMode.on}
                   onBarCodeRead={this.onBarCodeRead}
               >
                   <View style={styles.rectangleContainer}>
                       <View style={styles.rectangle}/>
                       <Animated.View style={[
                           styles.border,
                           {transform: [{translateY: this.state.moveAnim}]}]}/>
                       <Text style={styles.rectangleText}>將二維碼放入框內，便可自動掃描</Text>
                   </View>
                   </RNCamera>
           </View>
       );
   }

在 Camera 組件中繪製一個綠色的正方形 View，隨後就是繪製綠色方框中滾動的線。使用 RN 中的 Animated 組件來實現動畫效果。 首先在 componentDidMount 函數中初始化動畫函數。

componentDidMount() {
    this.startAnimation();
}

startAnimation = () => {
    this.state.moveAnim.setValue(0);
    Animated.timing(
        this.state.moveAnim,
        {
            toValue: -200,
            duration: 1500,
            easing: Easing.linear
        }
    ).start(() => this.startAnimation());
};

而且記得在構造函數中初始化 state：

constructor(props) {
    super(props);
    this.state = {
        moveAnim: new Animated.Value(0)
    };
}

經過 onBarCodeRead 函數來處理掃描結果：

//  識別二維碼
    onBarCodeRead = (result) => {
        const { navigate } = this.props.navigation;
               const {data} = result; //只要拿到data就能夠了
               //路由跳轉到webView頁面；
            navigate('Sale', { 
                url: data
            })
    };

完整版示例：

class ScanScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            moveAnim: new Animated.Value(0)
        };
    }

    componentDidMount() {
        this.startAnimation();
    }

    startAnimation = () => {
        this.state.moveAnim.setValue(0);
        Animated.timing(
            this.state.moveAnim,
            {
                toValue: -200,
                duration: 1500,
                easing: Easing.linear
            }
        ).start(() => this.startAnimation());
    };
    //  識別二維碼
    onBarCodeRead = (result) => {
        const { navigate } = this.props.navigation;
               const {data} = result;
            navigate('Sale', {
                url: data
            })
    };

    render() {
        return (
            <View style={styles.container}>
                <RNCamera
                    ref={ref => {
                        this.camera = ref;
                    }}
                    style={styles.preview}
                    type={RNCamera.Constants.Type.back}
                    flashMode={RNCamera.Constants.FlashMode.on}
                    onBarCodeRead={this.onBarCodeRead}
                >
                    <View style={styles.rectangleContainer}>
                        <View style={styles.rectangle}/>
                        <Animated.View style={[
                            styles.border,
                            {transform: [{translateY: this.state.moveAnim}]}]}/>
                        <Text style={styles.rectangleText}>將二維碼放入框內，便可自動掃描</Text>
                    </View>
                    </RNCamera>
            </View>
        );
    }
}

export default ScanScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row'
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center'
    },
    rectangleContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'transparent'
    },
    rectangle: {
        height: 200,
        width: 200,
        borderWidth: 1,
        borderColor: '#00FF00',
        backgroundColor: 'transparent'
    },
    rectangleText: {
        flex: 0,
        color: '#fff',
        marginTop: 10
    },
    border: {
        flex: 0,
        width: 200,
        height: 2,
        backgroundColor: '#00FF00',
    }
});