RN 使用第三方組件之react-native-image-picker


首先給個github地址:https://github.com/react-community/react-native-image-picker 

該插件可以同時給iOS和Android兩個平台下使用,但是需要配置下各自平台下的文件

 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

(注意這里的只要出現RNImagePicker.就可以了,跟前面的圖標沒關系)

 

     

     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

(點擊加號 選擇privacy camera usage Description 和 privacy. PhotoLibraryUsageDescription )

iOS平台配置完畢.

Android:

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

1
2
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:

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

  

     3.Add the required permissions in AndroidManifest.xml:

1
2
<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,安卓這邊也配置完畢.

用法:

   配置彈出框信息

/**底部彈出框選項*/
var photoOptions = {
title: '請選擇',
cancelButtonTitle: '取消',
takePhotoButtonTitle: '拍照',
chooseFromLibraryButtonTitle: '選擇相冊',
quality: 0.75,
allowsEditing: true,
noData: false,
storageOptions: {
skipBackup: true,
path: 'images'
}
}

點擊事件

choosePhoto() {
ImagePicker.showImagePicker(photoOptions,(response) =>{
console.log('response'+response);
if (response.didCancel){
showMsg("取消")
return
}else {
let source = { uri: response.uri };


}

})
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM