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

调用摄像头拍照

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

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

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

打开项目中的android->app->src->main->java->com->当前项目名称文件夹->MainActivity.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";

    }

}

在项目中添加如下代码：

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

      });

    })

  }

一定要退出之前调试的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---调用拍照摄像头

调用摄像头拍照

最新文章

热门文章