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