react-native-camera调用实现拍照

react-native-camera调用实现拍照

demo: https://github.com/wangzuxing/myrncamera2

命令行创建项目工程、安装、关联组件

react-native init myrncamera2cd myrncamera2// A Camera component： https://github.com/lwansbrough/react-native-cameranpm install react-native-camera --save // link组件react-native link react-native-camera  

配置android工程
首先在android目录下加入local.properties(命令行创建工程，默认不包含该文件，指定android工程sdk目录sdk.dir)

a、android/settings.gradle 中添加：

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

b、android/app/build.gradle 中添加：

dependencies {    compile project(':react-native-camera') // 添加    compile fileTree(dir: "libs", include: ["*.jar"])    compile "com.android.support:appcompat-v7:23.0.1"    compile "com.facebook.react:react-native:+"  // From node_modules}

c、android/app/src/main/AndroidManifest.xml 中添加：
访问权限：

<uses-permission android:name="android.permission.RECORD_AUDIO"/><uses-permission android:name="android.permission.RECORD_VIDEO"/><uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

b、android/app/src/main/java/[…]/MainApplication.java 中添加：

import com.lwansbrough.RCTCamera.RCTCameraPackage; //添加    @Override    protected List<ReactPackage> getPackages() {      return Arrays.<ReactPackage>asList(          new MainReactPackage(),          new RCTCameraPackage() // 添加      );    }

4、index.android.js 添加功能实现(导入相关功能组件)：

'use strict';import React, { Component } from 'react';import {  AppRegistry,  Dimensions,  StyleSheet,  Text,  TouchableHighlight,  View} from 'react-native';import Camera from 'react-native-camera';class BadInstagramCloneApp extends Component {  render() {    return (      <View style={styles.container}>        <Camera          ref={(cam) => {            this.camera = cam;          }}          style={styles.preview}          aspect={Camera.constants.Aspect.fill}>          <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>        </Camera>      </View>    );  }  takePicture() {    const options = {};    //options.location = ...    this.camera.capture({metadata: options})      .then((data) => console.log(data))      .catch(err => console.error(err));  }}const styles = StyleSheet.create({  container: {    flex: 1,    flexDirection: 'row',  },  preview: {    flex: 1,    justifyContent: 'flex-end',    alignItems: 'center'  },  capture: {    flex: 0,    backgroundColor: '#fff',    borderRadius: 5,    color: '#000',    padding: 10,    margin: 40  }});AppRegistry.registerComponent('myrncamera2', () => BadInstagramCloneApp);

命令行执行(即开启packager, Running packager on port 8081)：

react-native start

6、命令行执行(连接android真机/模拟器，新开命令窗口，进入到项目myrncamera2目录下，输入如下指令)：

react-native run-android