react-native打开摄像机、ios端二维码扫描

近日很多人反映react-native-camera怎么用？还有人说ios的二维码扫描咋没有呢？其实这些问题在react-native-camera上都有介绍，在ideacreation/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 (
      <View style={styles.container}>
        <StatusBar
          animated
          hidden
        />
        <Camera
          ref={(cam) => {
            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}
        />
        <View style={[styles.overlay, styles.topOverlay]}>
          <TouchableOpacity
            style={styles.typeButton}
            onPress={this.switchType}
          >
            <Image
              source={this.typeIcon}
            />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.flashButton}
            onPress={this.switchFlash}
          >
            <Image
              source={this.flashIcon}
            />
          </TouchableOpacity>
        </View>
        <View style={[styles.overlay, styles.bottomOverlay]}>
          {
            !this.state.isRecording
            &&
            <TouchableOpacity
                style={styles.captureButton}
                onPress={this.takePicture}
            >
              <Image
                  source={require('./assets/ic_photo_camera_36pt.png')}
              />
            </TouchableOpacity>
            ||
            null
          }
          <View style={styles.buttonsSpace} />
          {
              !this.state.isRecording
              &&
              <TouchableOpacity
                  style={styles.captureButton}
                  onPress={this.startRecording}
              >
                <Image
                    source={require('./assets/ic_videocam_36pt.png')}
                />
              </TouchableOpacity>
              ||
              <TouchableOpacity
                  style={styles.captureButton}
                  onPress={this.stopRecording}
              >
                <Image
                    source={require('./assets/ic_stop_36pt.png')}
                />
              </TouchableOpacity>
          }
        </View>
      </View>
    );
  }
}

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

大家注意：现在的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</span></span>

其中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 (deprecated)

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二维码的识别：

<Camera
          ref={(cam) => {
            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/中，请下载自行运行下看下哦