Github：https://github.com/react-native-community/react-native-camera

android:

1、npm install react-native-camera --save

     之後直接 react-native link react-native-camera 有問題在手動配置

2、settings.gradle:

include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-camera/android')
 

3、app/build.gradle

dependencies {
    ...
    compile project(':react-native-camera')
}

4、AndroidManifest.xml：

<uses-permission android:name="android.permission.CAMERA" />//相機許可權
<uses-permission android:name="android.permission.VIBRATE" />//震動許可權
<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-feature android:name="android.hardware.camera.front" android:required="false" />
 

5、MainApplication.java：

protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new RNCameraPackage()
      );
}

ios:

1、使用Xcode開啟CameraDemo/ios/CameraDemo.xcodeproj檔案，在Project navigator->Libraries資料夾上右擊選擇Add Files to 'CameraDemo'

2、選擇專案中的node_modules->react-native-camera並且新增RCTCamera.xcodeproj檔案

3、在Build Phases中新增libRCTCamera.a

4、在Build Settings中找到Search Paths下的Header Search Paths，新增$(SRCROOT)/../../react-native/React和$(SRCROOT)/../../../React，並且選擇recursive

5、開啟nfo.plist檔案，新增許可權

NSCameraUsageDescription       請允許使用您的相機

import React, {Component} from 'react';
import {
    StyleSheet, 
    View,
    Animated,
    Easing,
    Platform,
    Text,
    Dimensions,
    InteractionManager
} from 'react-native';

import { RNCamera } from 'react-native-camera'
const { width,height } = Dimensions.get('window')
 
export default class Camera extends Component {
    constructor(props) {
        super(props);
        this.state = {
            transCode:'', // 條碼
            type: '', // 條碼型別
            show: true,
            animate: new Animated.Value(0), // 二維座標{x:0,y:0}
        }
    }
    componentDidMount(){
        InteractionManager.runAfterInteractions(() => {
            this.startAnimation()
        })
    }
    // 動畫開始
    startAnimation(){
        if(this.state.show){
            this.state.animate.setValue(0);
            Animated.timing(this.state.animate,{
                toValue: 1,   // 運動終止位置，比值
                duration: 2500,  // 動畫時長
                easing: Easing.linear,  // 線性的漸變函式
                delay: 0.5,// 在一段時間之後開始動畫（單位是毫秒），預設為0
            }).start(() => this.startAnimation())
        }
    }
    componentWillUnmount(){
        this.state.show = false;
    }
    barcodeReceived(e){
        if(this.state.show){
            console.log(e);
            this.setState({
                transCode: e.data,
                type: e.type,
                show: false
            })
        }
    }
    render() {
        return (
            <View style={styles.container}>
                <RNCamera
                    onBarCodeRead={this.barcodeReceived.bind(this)}
                    onCameraReady={() => {
                        console.log('ready')
                    }}
                    permissionDialogTitle={'Permission to use camera'}
                    permissionDialogMessage={'We need your permission to use your camera phone'}
                    style={styles.camera}
                >
                    <View style={styles.box}>
                        <View style={styles.kuang}>
                            <Animated.View style={{
                                alignItems: 'center',
                                transform: [{
                                    // translateX: x軸移動
                                    // translateY: y軸移動
                                    translateY: this.state.animate.interpolate({
                                        inputRange: [0,1],
                                        outputRange: [0,200]
                                    })
                                }]
                            }}>
                                <Text style={{width:250,height:1,backgroundColor:'#00ff00'}}></Text>
                            </Animated.View>
                        </View>
                    </View>
                    <View style={styles.info}>
                        <Text>條碼資訊：{this.state.transCode}</Text>
                        <Text>條碼型別：{this.state.type}</Text>
                    </View>
                </RNCamera>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    camera: {
        flex: 1,
    },
    box: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.6)',
    },
    kuang: {
        width: 260,
        height: 260,
        borderWidth: 1,
        borderColor: 'skyblue',
        backgroundColor: '#rgba(255,255,255,0.1)'
    },
    info: {
        width: width,
        height: 80,
        backgroundColor: '#fff',
        paddingLeft: 10,
        paddingBottom:5,
        justifyContent: 'space-around',
    }
});