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