我的头像上传用的是 github 上的开源项目：react-native-image-picker
首先需要导入插件并配置：
1、安装
npm install react-native-image-picker@latest --save
2、android 配置
react-native link react-native-image-picker
这里提一下为什么需要 link，react-native-image-picker 相当于是在原生的项目外面套了一层 js ，所以需要依赖一下，其实就相当于原生 android 中，新加入了一个 modules，需要与我们的项目进行依赖。
3、link 有时候未成功或缺少一些东西。这时可以比对以下下面的地方是否都已设置好：
android/settings.gradle
rootProject.name = 'reactNativeProject'
include ':app'
// 需添加
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
android/app/build.gradle
dependencies {
compile project(':react-native-image-picker’) // 需添加
}
AndroidManifest.xml
// 开放权限
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
MainApplication.java
import com.imagepicker.ImagePickerPackage; // <-- add this import
public class MainApplication extends Application implements ReactApplication {
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new ImagePickerPackage() // <-- add this line
);
}
}
全部配置完后需 rebuild 一下，如果还报错，就看一下是不是哪儿漏了，如果还报错，就关掉重新打开再 rebuild 几下，总之我的刚配置好后 MainApplication 一直在报错，好像是上面 import 的包下载不下来，然后我就捣饬了半天，莫名其妙就好了。
4、使用
我所需要完成的功能是点击某处后弹出选择框，选择是拍照还是从相册中选取，成图如下：
点击拍照后进入手机的拍照功能，点击选择相册进入手机相册。
先看这部分是如何完成的。
弹出框部分：
import ImagePicker from 'react-native-image-picker’; // 导入
var options = { // 弹出框配置
title:'请选择’,
cancelButtonTitle:'取消',
takePhotoButtonTitle:'拍照',
chooseFromLibraryButtonTitle:'选择相册',
quality:0.75,
allowsEditing:true,
noData:false,
storageOptions: {
skipBackup: true,
path:'images'
}
};
这部分代码需放置在组件外部。
constructor(props) {
super();
this.state = {
avatarSource: null,
};
this._imagePicker = this._imagePicker.bind(this); // bind
}
_imagePicker() {
ImagePicker.showImagePicker(options,(res) => {
if (res.didCancel) { // 返回
return
} else {
let source; // 保存选中的图片
source = {uri: 'data:image/jpeg;base64,' + res.data};
if (Platform.OS === 'android') {
source = { uri: res.uri };
} else {
source = { uri: res.uri.replace('file://','') };
}
this.setState({
avatarSource: source
});
}
})
}
既然选择了图片，那么为了更直观的看到，我们可以在本地先暂时保存选中的图片。
可以看到这里面就已经有图片显示的地方，最后选择好图片后如图：
我这里没有图片剪裁的功能，如果想要达到图片剪裁以及多图片上传等功能，可以看一下 github 上的另外一个开源项目：react-native-image-crop-picker
地址如下：https://github.com/ivpusic/react-native-image-crop-picker
