首先給個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,安卓這邊也配置完畢.
用法:
配置彈出框信息
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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'
}
}
|
點擊事件
|
1
2
3
4
5
6
7
8
|
cameraAction = () =>{
ImagePicker.showImagePicker(options, (response) => { console.log('Response = ', response); if (response.didCancel) { console.log('User cancelled image picker'); } else if (response.error) { console.log('ImagePicker Error: ', response.error); } else if (response.customButton) { console.log('User tapped custom button: ', response.customButton); } else { let source = { uri: response.uri }; // You can also display the image using data: // let source = { uri: 'data:image/jpeg;base64,' + response.data }; this.setState({ avatarSource: source }); } });
}
|
<Image source={this.state.avatarSource} style={styles.uploadAvatar} />
這里注意的是 ios的模擬器不能拍照哦
案例:
