React native build basic page 5 — call camera

Time:2020-5-22

Call camera to take photos

GitHub official website of react native image picker

  1. yarn add react-native-image-picker
  2. functionreact-native linkAutomatically register related components to the native configuration
  3. Open theandroid->app->src->main->AndroidManifest.xmlFile, add the following configuration on line 8:
  1. Open theandroid->app->src->main->java->com->Current project name folder->MainActivity.javaFile, modify the configuration as follows:
    “`java
    package com.native_camera;
    import com.facebook.react.ReactActivity;

    //1. Add the following two lines:
    import com.imagepicker.permissions.OnImagePickerPermissionsCallback; //
    import com.facebook.react.modules.core.PermissionListener; //

    public class MainActivity extends ReactActivity {
    //2. Add the following line:
    private PermissionListener listener; //

    /**
      * 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. Add the following code to the project:
//Step 1:
    import {View, Button, Image} from 'react-native'
    import ImagePicker from 'react-native-image-picker'
    var photoOptions = {
      //Bottom flyout options
      Title: 'please select',
      Cancelbuttontitle: 'Cancel',
      Takephotobuttontitle: 'take a picture',
      Choosefromlibrarybuttontitle: 'select album',
      quality: 0.75,
      allowsEditing: true,
      noData: false,
      storageOptions: {
        skipBackup: true,
        path: 'images'
      }
    }

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

    //Step 3:
    
    

    //Step 4:
    cameraAction = () => {
    ImagePicker.showImagePicker(photoOptions, (response) => {
      console.log('response' + response);
      if (response.didCancel) {
        return
      }
      this.setState({
        imgURL: response.uri
      });
    })
  }
  1. Be sure to quit the App before debugging., and re runreact-native run-androidCarry out packaging deployment; during this packaging, some jar packages will be downloaded, and you need to wait patiently!

me.js

import React, { Component } from 'react'
//Step 1:
import { View, Button, Image } from 'react-native'
//Import photo bag
import ImagePicker from 'react-native-image-picker'
//Create configuration object when taking photos
var photoOptions = {
  //Bottom flyout options
  Title: 'please select',
  Cancelbuttontitle: 'Cancel',
  Takephotobuttontitle: 'take a picture',
  Choosefromlibrarybuttontitle: 'select album',
  Quality: 0.75, // quality of photos
  Allowsediting: true, // allowed to be edited
  NoData: false, // no date attached
  Storageoptions: {// storage options
    Skipbackup: true, // in IOS platform, the photos will be automatically synchronized to the storage in the cloud. If this item is true, it means that the backup is skipped and the photos will not be uploaded to the cloud
    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 '// in the future, the path of the photos will be saved here
    }
  }

  render() {
    return 
      
      
    
  }

  //Step 4:
  cameraAction = () => {
    ImagePicker.showImagePicker(photoOptions, (response) => {
      console.log('response' + response);
      if ( response.didCancel ){// click Cancel. At this time, the user does not take a picture
        return
      }

      //The user has taken a picture
      this.setState({
        imgURL: response.uri
      });
    })
  }
}