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

Posted ygjzs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-native构建基本页面5---调用拍照摄像头相关的知识,希望对你有一定的参考价值。

调用摄像头拍照

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

以上是关于react-native构建基本页面5---调用拍照摄像头的主要内容,如果未能解决你的问题,请参考以下文章

react-native构建基本页面3---路由配置

react-native构建基本页面6---打包发布

react-native构建基本页面1---轮播图+九宫格

我在 react-native 和 redux 中处理 API 调用的地方

React-Native从入门到深入--组件生命周期

react-native如何在facebook登录和注销后刷新页面