React-Native打开摄像机、ios端二维码扫描

最新推荐文章于 2025-06-13 10:18:37 发布

转载最新推荐文章于 2025-06-13 10:18:37 发布 · 2.8k 阅读

【React-Native2点滴知识】专栏收录该内容

698 篇文章

订阅专栏

本文详细介绍了如何在React Native应用中集成并使用react-native-camera组件，包括安装配置、基本用法、事件处理及iOS二维码扫描等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近日很多人反映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文件，放置摄像机的界面，我这里就用入口文件介绍：文件的内容如下：

/**
* Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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} />

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

大家注意：现在的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.youkuaiyun.com/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 (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/中，请下载自行运行下看下哦