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://[e-mail]/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',
    }
});