react-native构建基本页面5---调用拍照摄像头

Posted 2021-03-15 ygjzs

调用摄像头拍照

react-native-image-picker的github官网

1. yarn add react-native-image-picker
2. 运行react-native link自动注册相关的组件到原生配置中
3. 打开项目中的android->app->src->main->AndroidManifest.xml文件，在第8行添加如下配置：

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

1. 打开项目中的android->app->src->main->java->com->当前项目名称文件夹->MainActivity.java文件，修改配置如下：
   ```java
   package com.native_camera;
   import com.facebook.react.ReactActivity;

   // 1. 添加以下两行：
   import com.imagepicker.permissions.OnImagePickerPermissionsCallback; // <- add this import
   import com.facebook.react.modules.core.PermissionListener; // <- add this import

   public class MainActivity extends ReactActivity {
   // 2. 添加如下一行：
   private PermissionListener listener; // <- add this attribute

    /**
     * Returns the name of the main component registered from javascript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "native_camera";
    }

   }
   ```
2. 在项目中添加如下代码：

    // 第1步：
    import {View, Button, Image} from 'react-native'
    import ImagePicker from 'react-native-image-picker'
    var photoOptions = {
      //底部弹出框选项
      title: '请选择',
      cancelButtonTitle: '取消',
      takePhotoButtonTitle: '拍照',
      chooseFromLibraryButtonTitle: '选择相册',
      quality: 0.75,
      allowsEditing: true,
      noData: false,
      storageOptions: {
        skipBackup: true,
        path: 'images'
      }
    }

    // 第2步：
    constructor(props) {
    super(props);
        this.state = {
          imgURL: ''
        }
      }

    // 第3步：
    <Image source={{ uri: this.state.imgURL }} style={{ width: 200, height: 200 }}></Image>
    <Button title="拍照" onPress={this.cameraAction}></Button>

    // 第4步：
    cameraAction = () => {
    ImagePicker.showImagePicker(photoOptions, (response) => {
      console.log('response' + response);
      if (response.didCancel) {
        return
      }
      this.setState({
        imgURL: response.uri
      });
    })
  }

1. 一定要退出之前调试的App，并重新运行react-native run-android进行打包部署；这次打包期间会下载一些jar的包，需要耐心等待！

me.js

import React, { Component } from 'react'
// 第1步：
import { View, Button, Image } from 'react-native'
// 导入拍照的包
import ImagePicker from 'react-native-image-picker'
// 创建拍照时候的配置对象
var photoOptions = {
  //底部弹出框选项
  title: '请选择',
  cancelButtonTitle: '取消',
  takePhotoButtonTitle: '拍照',
  chooseFromLibraryButtonTitle: '选择相册',
  quality: 0.75, // 照片的质量
  allowsEditing: true, // 允许被编辑
  noData: false, // 拍照时候不附带日期
  storageOptions: { // 存储选项
    skipBackup: true, // 在ios平台中，会自动把 照片同步到 云端的存储，如果此项为 true，表示跳过 备份，不会把照片上传到 云端
    path: 'images'
  }
}

export default class Me extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imgURL: 'https://avatars0.githubusercontent.com/u/15337769?s=460&v=4' // 将来，拍摄的照片路径，会存到这里
    }
  }

  render() {
    return <View style={{ alignItems: 'center', paddingTop: 70 }}>
      <Image source={{ uri: this.state.imgURL }} style={{ width: 200, height: 200, borderRadius: 100 }}></Image>
      <Button title="拍照" onPress={this.cameraAction}></Button>
    </View>
  }

  // 第4步：
  cameraAction = () => {
    ImagePicker.showImagePicker(photoOptions, (response) => {
      console.log('response' + response);
      if (response.didCancel) { // 点击了取消按钮，此时，用户没有拍照
        return
      }

      // 用户已经拍摄了一张照片了
      this.setState({
        imgURL: response.uri
      });
    })
  }
}