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:
手動添加庫 :
- In the XCode‘s "Project navigator", right click on your project‘s Libraries folder ?
Add Files to <...>
- Go to
node_modules
?react-native-image-picker
?ios
? selectRNImagePicker.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 };
}
})
}
RN 使用第三方組件之react-native-image-picker