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

// 开放权限
<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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容