返回 导航

React / React Native

hangge.com

React Native - 调用摄像头拍照(使用react-native-camera库)

作者:hangge | 2017-04-18 08:10

1,react-native-camera介绍

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

2,安装配置

(1)首先在“终端”中进入项目目录,然后执行如下命令安装最新版本的 react-native-camera
npm install react-native-camera@latest --save

(2)接着运行如下命令链接相关的依赖库:
react-native link react-native-camera

(3)由于我们需要调用摄像头拍照,同时拍完还要保存到相册中。因此需要在 Info.plist 配置请求摄像头、及照片相关的描述字段(Privacy - Camera Usage DescriptionPrivacy - Photo Library Usage Description
如果要拍摄录像的话,还需要加上:Privacy - Microphone Usage Description
 

3,使用样例

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

(2)样例代码
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);
评论

全部评论(0)

回到顶部