react-native打开摄像机、ios端二维码扫描
近日很多人反映react-native-camera怎么用？还有人说ios的二维码扫描咋没有呢？其实这些问题在react-native-camera上都有介绍，在/React-native-barcodescanner中也有讲，如果是ios的话请使用react-native-camera；下面我就RN调用摄像机做下简单的介绍吧：
一、首先打开终端命令，进入项目，输入一下命令：
npm install react-native-camera@https://github.com/lwansbrough/react-native-camera.git --save
等待安装完成后，然后输入：react-native link react-native-camera
这是在你的工程中就有了这个组件。
二、建立项目（这里面的代码和图片基本上都是作者的代码，我只是稍微修改了下）
2.1、首先再项目下面新建一个assets，把需要的图片拷贝进去
2.2、下面新建一个js文件，放置摄像机的界面，我这里就用入口文件介绍：
文件的内容如下：
import React, { Component } from 'react';
import {
AppRegistry,
Image,
StatusBar,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native';
import Camera from 'react-native-camera';
export default class First extends Component {
constructor(props) {
super(props);
this.camera = null;
this.state = {
camera: {
aspect: Camera.constants.Aspect.fill,
captureTarget: Camera.constants.CaptureTarget.cameraRoll,
type: Camera.constants.Type.back,
orientation: Camera.constants.Orientation.auto,
flashMode: Camera.constants.FlashMode.auto,
},
isRecording: false
};
this.takePicture = this.takePicture.bind(this);
this.startRecording = this.startRecording.bind(this);
this.stopRecording = this.stopRecording.bind(this);
this.switchType = this.switchType.bind(this);
this.switchFlash = this.switchFlash.bind(this);
}
takePicture() {
if (this.camera) {
this.camera.capture()
.then((data) => console.log(data))
.catch(err => console.error(err));
}
}
startRecording() {
if (this.camera) {
this.camera.capture({mode: Camera.constants.CaptureMode.video})
.then((data) => console.log(data))
.catch(err => console.error(err));
this.setState({
isRecording: true
});
}
}
stopRecording() {
if (this.camera) {
this.camera.stopCapture();
this.setState({
isRecording: false
});
}
}
switchType() {
let newType;
const { back, front } = Camera.constants.Type;
if (this.state.camera.type === back) {
newType = front;
} else if (this.state.camera.type === front) {
newType = back;
}
this.setState({
camera: {
...this.state.camera,
type: newType,
},
});
}
get typeIcon() {
let icon;
const { back, front } = Camera.constants.Type;
if (this.state.camera.type === back) {
icon = require('./assets/ic_camera_rear_white.png');
} else if (this.state.camera.type === front) {
icon = require('./assets/ic_camera_front_white.png');
}
return icon;
}
switchFlash() {
let newFlashMode;
const { auto, on, off } = Camera.constants.FlashMode;
if (this.state.camera.flashMode === auto) {
newFlashMode = on;
} else if (this.state.camera.flashMode === on) {
newFlashMode = off;
} else if (this.state.camera.flashMode === off) {
newFlashMode = auto;
}
this.setState({
camera: {
...this.state.camera,
flashMode: newFlashMode,
},
});
}
get flashIcon() {
let icon;
const { auto, on, off } = Camera.constants.FlashMode;
if (this.state.camera.flashMode === auto) {
icon = require('./assets/ic_flash_auto_white.png');
} else if (this.state.camera.flashMode === on) {
icon = require('./assets/ic_flash_on_white.png');
} else if (this.state.camera.flashMode === off) {
icon = require('./assets/ic_flash_off_white.png');
}
return icon;
}
render() {
return (
{
this.camera = cam;
}}
style={styles.preview}
aspect={this.state.camera.aspect}
captureTarget={this.state.camera.captureTarget}
type={this.state.camera.type}
flashMode={this.state.camera.flashMode}
defaultTouchToFocus
mirrorImage={false}
/>
{
!this.state.isRecording
&&
||
null
}
||
}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
},
overlay: {
position: 'absolute',
padding: 16,
right: 0,
left: 0,
alignItems: 'center',
},
topOverlay: {
top: 0,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
bottomOverlay: {
bottom: 0,
backgroundColor: 'rgba(0,0,0,0.4)',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
captureButton: {
padding: 15,
backgroundColor: 'white',
borderRadius: 40,
},
typeButton: {
padding: 5,
},
flashButton: {
padding: 5,
},
buttonsSpace: {
width: 10,
},
});
AppRegistry.registerComponent('First', () => First);
大家注意：现在的RN版本做了下调整，入口文件index.android.js和index.ios.js都作为导出文件，也就是在class前面加了export default，最下面的注册入口没改，这个class是导出给---项目名下面有个_tests_的文件中，里面也有两个js文件，在这个里面导入的，和原来的写法稍微不同；
2.3、然后编译：android和ios都挂了，头大了，
android我是7.0的模拟器，直接闪退了，ios打不开，白屏然后过一会也闪退了；
然后我换了个红米真机用下，可以打开摄像机，我又换了6.0、5.0、4.4的模拟器都可以打开摄像机，就是7.0坑爹的打不开，估计是不兼容吧，希望改进了，这里我还没有研究为啥7.0打不开闪退的问题：
2.3.1、ios我用xcode打开项目-->ios-->First.xcodeproj,然后编译一看，有5个感叹号！
libRCTCamera.a(CameraFocusSquare.o)) was built for newer iOS version (8.2) than being linked (8.0)
也就是说camera最低的编译版本是8.2，我的版本是8.0，需要调整我的xcode编译版本，具体的操作步骤如下：
点击项目名（first）--->然后选择右边的选项卡 General ---> Deployment Info --->Deployment Target,调整成8.2以上的版本，我这次改成了10.0的；然后编译，不报感叹号了，但是报错了；
2.3.2、报错内容如下：
The app’s Info.plist must contain an NSPhotoLibraryUsageDescription key with a string value explaining to the user how the app uses this data.
这是因为没有加权限的原因，在info里面机上摄像机的权限就行了，plist里面必须加上NSPhotoLibraryUsageDescription和NSCameraUsageDescription的键值对才行：
具体查看 http://blog.csdn.net/zp511253886/article/details/52584210，
然后编译，真高兴啊，通过了，然后在ios模拟器上点击确定打开摄像机，就可以了，但是由于模拟器不支持摄像机，所以看不到东西哦！
2.4、下面来分析下上面的代码：
2.4.1、首先导入camera：
import Camera from 'react-native-camera';
2.4.2、接着状态机里面的几个状态如下：
camera: {
aspect: Camera.constants.Aspect.fill,
captureTarget: Camera.constants.CaptureTarget.cameraRoll,
type: Camera.constants.Type.back,
orientation: Camera.constants.Orientation.auto,
flashMode: Camera.constants.FlashMode.auto,
},
isRecording: false其中aspect是指图像和屏幕的拉伸宽度，有三个参数，一个是默认的fill，一个是fit，一个是stretch，具体他们的对比如下图：
captureTarget是指相片存储的位置，ios默认是cameraRoll，android默认是disk，作者提供了4中方式，但是最后一个存储在内存中已经被废弃了：而且作者建议用disk： Camera.constants.CaptureTarget.cameraRoll (ios only default), Camera.constants.CaptureTarget.disk(android default), Camera.constants.CaptureTarget.temp, Camera.constants.CaptureTarget.memory
type指的是前置还是后置摄像头；
orientation指的是摄像机横屏还是竖屏，默认是随着屏幕自动调整的；还有一个flashMode是闪关灯的模式，默认是自动的；当然官方文档中还有图片的captureQuality（有4种模式：heigh、medium、low、photo）还有焦点改变的事件：onFocusChanged，简单的理解就是我们手指点击图像的哪个地方就聚焦哪个地方；大小改变的事件也就是onZoomChanged，表示景物离我们远近的事件；mirrorImage如果值为true的话，表示图像变成镜像的了；还有ios的二维码识别：onBarCodeRead；等等其他的事件，需要的话请参考官方文档；
2.2.2、然后进行布局，我的界面上主要有4个按键，一个是左上角的前后摄像头的切换，右上角的闪关灯的开关，底部的拍照和录像的按钮；
2.2.2.1、左上角的是switchType()这个方法，初始状态机里面的是后置摄像机，这里我用的是模拟器，所以调成了前置摄像机，
2.2.2.2、紧接着是get typeIcon()这个方法是改变前后摄像机的图标的
2.2.2.3、其中takePicture是拍照的方法，startRecording和stopRecording是开始录像和停止录像的方法，takePicture和startRecording调用的是camera的capture方法：
capture的参数可以是
-
audio(具体需要查看captureAudio) -
mode(具体需要查看captureMode，这里面有两个值一个是默认的fill代表的是图片，一个是video代表的是视频) -
target(具体需要查看captureTarget) -
metadata这个加到图片中的元数据-
location这是从navigator.geolocation.getCurrentPosition()返回的值(React Native's geolocation polyfill).意思呢就是把gps的坐标信息加到图片中
-
-
rotation这个呢是把图片旋转多少度。
stopRecording调用的是摄像机的stopCapture方法；
switchFlash和flashIcon分别是改变闪关灯的开关和闪关灯的图标的；
三、介绍下ios二维码的识别：
{
this.camera = cam;
}}
style={styles.preview}
aspect={this.state.camera.aspect}
captureTarget={this.state.camera.captureTarget}
type={this.state.camera.type}
flashMode={this.state.camera.flashMode}
defaultTouchToFocus
mirrorImage={false}
/> onBarCodeRead=(e)=>{
console.log(e.data);
} 意思呢就是说当识别出来二维码后，传回的是一个参数，这个参数里面就包含有二维码的数据data
完整代码在 https://github.com/LiuC520/react-native-lc-opencamera/中，请下载自行运行下看下哦