React Native调用摄像头拍照

react-native-camera 是一个第三方的开源库，我们可以通过它来调用设备的摄像头，从而实现拍照、或者录像功能。
react-native-camera 功能强大，我们可以选择使用哪个摄像头、是拍照还是录像、是否录制声音、是否开启闪光灯、视图比例、拍摄质量、拍摄方向、触摸功能、条形码/二维码扫描等等。

npm介绍：https://www.npmjs.com/package/react-native-camera

npm下载

> npm install react-native-camera @latest  --save

安装依赖库

> react-native link react-native-camera

在AndroidManifest.xml文件中添加权限

<!-- 相机权限 -->
<uses-permission android:name="android.permission.CAMERA" />

<!-- 录像相关权限 -->
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

ios环境配置

Xcode打开项目的iOS，找到Info.plist文件打开，添加如下权限

• Privacy - Camera Usage Description
• Privacy - Microphone Usage Description
• Privacy - Photo Library Usage Description
• Privacy - Photo Library Additions Usage Description

打开Info.plist添加如下代码：

示例代码

import  React , {  Component  } from  'react' ;
import  {
   AppRegistry ,
   Dimensions ,
   StyleSheet ,
   Text ,
   TouchableHighlight ,
   View
} from  'react-native' ;
import  Camera  from  'react-native-camera' ;

class  App  extends  Component  {
   //构造函数
   constructor(props) {
       super (props);
       this.state = {
             cameraType:  Camera .constants. Type .back
       };
   }

   //渲染
   render() {
     return  (
       < View  style={styles.container}>
         < Camera
           ref={(cam) => {
             this.camera = cam;
           }}
           style={styles.preview}
           type={this.state.cameraType}
           aspect={ Camera .constants. Aspect .fill}>
           < Text  style={styles.button} onPress={this.switchCamera.bind(this)}>[切换摄像头]</ Text >
           < Text  style={styles.button} onPress={this.takePicture.bind(this)}>[拍照]</ Text >
         </ Camera >
       </ View >
     );
   }

   //切换前后摄像头
   switchCamera() {
     var  state = this.state;
     if (state.cameraType ===  Camera .constants. Type .back) {
       state.cameraType =  Camera .constants. Type .front;
     } else {
       state.cameraType =  Camera .constants. Type .back;
     }
     this.setState(state);
   }

   //拍摄照片
   takePicture() {
     this.camera.capture()
       .then(function(data){
         alert( "拍照成功！图片保存地址：\n" +data.path)
       })
       .catch(err => console.error(err));
   }
}

const styles =  StyleSheet .create({
   container: {
     flex: 1,
     flexDirection:  'row' ,
   },
   preview: {
     flex: 1,
     justifyContent:  'space-between' ,
     alignItems:  'flex-end' ,
     flexDirection:  'row' ,
   },
   toolBar: {
     width: 200,
     margin: 40,
     backgroundColor:  '#000000' ,
     justifyContent:  'space-between' ,

   },
   button: {
     flex: 0,
     backgroundColor:  '#fff' ,
     borderRadius: 5,
     color:  '#000' ,
     padding: 10,
     margin: 40,
   }
});

AppRegistry .registerComponent( 'ReactDemo' , () =>  App );

参考链接：

• https://blog.csdn.net/qq_38719039/article/details/79469634
• https://www.pianshen.com/article/58041472439/