react-native 图片上传 react-native-image-picker

我的头像上传用的是 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

// 开放权限

MainApplication.java

import com.imagepicker.ImagePickerPackage; // <-- add this import

public class MainApplication extends Application implements ReactApplication {
    @Override
    protected List getPackages() {
        return Arrays.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