React Native 基于react-native-camera实现扫码功能

一、安装
npm install react-native-camera --save
react-native link react-native-camera
二、配置（IOS）
三、使用
只需import { RNCamera } from react-native-camera 模块中 取出标签。

引用标签：

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

四、属性
1. autoFocus
值：（RNCamera.Constants.AutoFocus.on默认）或RNCamera.Constants.AutoFocus.off

	使用该autoFocus属性指定相机的自动对焦设置。
	RNCamera.Constants.AutoFocus.on将其打开，RNCamera.Constants.AutoFocus.off将其关闭。

2.flashMode
	指定相机的闪光模式
	值：（RNCamera.Constants.FlashMode.off默认）RNCamera.Constants.FlashMode.on；

3.onBarCodeRead
	检测到条形码时，将调用指定的方法；
	事件包含data（条形码中的数据）和type（检测到的条形码类型）

五、绘制扫码界面
代码：
import {RNCamera} from ‘react-native-camera’

	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());
		    };
		    //  识别二维码