React Native - 调用摄像头拍照（使用react-native-camera库）

http://www.hangge.com/blog/cache/detail_1618.html

React Native - 调用摄像头拍照（使用react-native-camera库）

  发布：hangge 阅读：6871

1，react-native-camera介绍

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

2，安装配置

（1）首先在“ 终端”中进入项目目录，然后执行如下命令安装最新版本的  react-native-camera

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

（2）接着运行如下命令链接相关的依赖库：

1	react-native link react-native-camera

（3）由于我们需要调用摄像头拍照，同时拍完还要保存到相册中。因此需要在  Info.plist 配置请求摄像头、及照片相关的描述字段（ Privacy - Camera Usage Description、 Privacy - Photo Library Usage Description）

如果要拍摄录像的话，还需要加上： Privacy - Microphone Usage Description
 

3，使用样例

（1）效果图

• 程序启动后全屏显示当前摄像头拍摄的图像。
• 默认使用的后置摄像头。点击“切换摄像头”按钮可以在前置、后置摄像头间相互切换。
• 点击拍照，拍摄成功后会自动将照片保存到系统相簿中，并弹出显示照片的路径。

（2）样例代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88

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 );