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

4. 打開專案中的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";
       }
   }
   

5. 在專案中添加如下代碼：

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

6. 一定要退出之前除錯的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
      });
    })
  }
}

標籤：JavaScript

上一篇：react-native構建基本頁面4---渲染電影串列

下一篇：自定義Redux