react native 之 react-native-image-picke的詳細使用圖解

最近需要在react native項目中集成相機和相冊的功能,於是在網上找了一個好用的第三方插件:react-native-image-picke.

該插件可以同時給iOS和Android兩個平台下使用,但是需要配置下各自平台下的文件,github上有詳細的文字說明,但是本人對於文字向來無感,所以特地圖解記錄下配置說明和用法.

 1.   首先,安裝下該插件:

npm install react-native-image-picker@latest --save

 2.   先別link,先添加進來該庫之后 再link.  

下面對於各自平台進行配置即可.

iOS:

1. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>
2. Go to node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj

　=>  打開Xcode打開項目,點擊根目錄,右鍵選擇　Add Files to 'XXX',選中項目中的該路徑下的文件即可:node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj

      

OK,添加進來之后,再進行 link命令.  react-native link react-native-image-picker 

3.Add RNImagePicker.a to Build Phases -> Link Binary With Libraries

 

     

     4.For iOS 10+, Add the NSPhotoLibraryUsageDescription and NSCameraUsageDescription keys to your Info.plist with strings describing why your app needs these permissions

=>對於適配iOS10,需要在info.plist中配置NSPhotoLibraryUsageDescription和NSCameraUsageDescription

iOS平台配置完畢.

Android:

    1.Add the following lines to android/settings.gradle:

include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')

 

    2.Add the compile line to the dependencies in android/app/build.gradle:

dependencies {
    compile project(':react-native-image-picker')
}

　　

     3.Add the required permissions in AndroidManifest.xml:

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

　　

     4.Add the import and link the package in MainApplication.java:   

import com.imagepicker.ImagePickerPackage;


.........



 new ImagePickerPackage()

 

 

 

OK,安卓這邊也配置完畢.

用法:

   配置彈出框信息

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'
    }
}

 

點擊事件

cameraAction = () =>{
         ImagePicker.showImagePicker(photoOptions,(response) =>{
             console.log('response'+response);
             if (response.didCancel){
                 return
             }
         })
    }

　　

案例:

 

demo地址:https://github.com/pheromone/mycamera