使用react-native-camera实现react-native的拍照功能

安装以及配置

官方文档

注：请确保RN版本>0.60

针对ios

window系统开发app无需配置，因为ios app只能使用苹果电脑开发

安装

1、npm install react-native-camera --save
2、cd ios && pod install && cd ..

配置

应用添加权限和使用说明ios文件夹创建Info.plist：

NSCameraUsageDescription
Your message to user when the camera is accessed for the first time


NSPhotoLibraryAddUsageDescription
Your message to user when the photo library is accessed for the first time


NSPhotoLibraryUsageDescription
Your message to user when the photo library is accessed for the first time


NSMicrophoneUsageDescription
Your message to user when the microphone is accessed for the first time

注: 如果存在问题按下面文件调整 Podfile文件

target 'yourTargetName' do
  # See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # Needed for debugging
    'RCTAnimation', # Needed for FlatList and animations running on native UI thread
    # Add any other subspecs you want to use in your project
  ]

  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  # Third party deps podspec link
  pod 'react-native-camera', path: '../node_modules/react-native-camera'

end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end
end

针对Android

安装

npm install react-native-camera --save

配置

• android/app/src/main/java/[...]/MainApplication.java下

  // 添加
  import org.reactnative.camera.RNCameraPackage;
  
  // 添加(大约27行处)
  packages.add(new RNCameraPackage());

• android/settings.gradle下

  // 添加到文件末尾就ok了
  include ':react-native-camera'
  project(':react-native-camera').projectDir = new File(rootProject.projectDir,     '../node_modules/react-native-camera/android')

• 向应用android/app/src/main/AndroidManifest.xml文件添加权限：

• android/app/build.gradle添加以下代码

  android {
    ...
    defaultConfig {
      ...
      missingDimensionStrategy 'react-native-camera', 'general' // <--- 添加这一行（大约在136行）
    }
  }

• 添加jitpack, android/build.gradle下

  // 在文件末尾添加就行了（如果存在了无需再添加）
  allprojects {
      repositories {
          maven { url "https://www.jitpack.io" }
          maven { url "https://maven.google.com" }
      }
  }

测试代码

在完成上面配置后肯定迫不及待的想使用一下了，复制下面代码粘贴到./index.js上

'use strict';
import React, { PureComponent } from 'react';
import { AppRegistry, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RNCamera } from 'react-native-camera';
import {name as appName} from './app.json';

class ExampleApp extends PureComponent {
  render() {
    return (
      
         {
            this.camera = ref;
          }}
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
          androidCameraPermissionOptions={{
            title: 'Permission to use camera',
            message: 'We need your permission to use your camera',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
          androidRecordAudioPermissionOptions={{
            title: 'Permission to use audio recording',
            message: 'We need your permission to use your audio',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
          onGoogleVisionBarcodesDetected={({ barcodes }) => {
            console.log(barcodes);
          }}
        />
        
          
             SNAP 
          
        
      
    );
  }

  takePicture = async() => {
    if (this.camera) {
      const options = { quality: 0.5, base64: true };
      const data = await this.camera.takePictureAsync(options);
      console.log(data.uri);
    }
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
});

AppRegistry.registerComponent(appName, () => ExampleApp);

效果图: