react-native上传多张图片

rn上传多张图片以前用
react-native-image-crop-picker这个插件，iOS那边完美运行没有毛病，但是到android这边之后就开始报各种资源找不到的问题，大概的原因有几种。版本不一样，我的框架用的是sdk26的。但是插件支持的是sdk27…我的版本太低了，所以里面的资源找不到,
后来从网上找到了另外一个插件react-native-syan-image-picker 这个插件，

然后在GitHub上搜syan-image-picker，找到如下： react-native-syan-image-picker.jpg
网址如下：

[https://github.com/search?q=syan-image-picker](https://github.com/search?q=syan-image-picker)

[syanbo/react-native-*syan*-*image*-*picker*](https://github.com/syanbo/react-native-syan-image-picker)
[chenWiggin/react-native-*syan*-*image*-*picker*](https://github.com/chenWiggin/react-native-syan-image-picker)
[vchenpeng/react-native-*syan*-*image*-*picker*](https://github.com/vchenpeng/react-native-syan-image-picker)

个人感觉非常实用
具体代码可以在GitHub上下载，并配置reac-native及相关包：
配置命令如下：

npm install react-native@^0.57.7
react-native -v
npm audit fix
npm install react-native-syan-image-picker@^0.3.6
react-native link react-native-syan-image-picker
npm install react@16.6.1
npm install babel-jest@23.6.0
npm install jest@23.6.0
npm install metro-react-native-babel-preset@0.50.0
npm install react-test-renderer@16.6.1

核心代码如下：
导入头文件：

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    Dimensions,
    PermissionsAndroid
} from 'react-native';
import SYImagePicker from 'react-native-syan-image-picker'
const {width} = Dimensions.get('window');

拍照时调用摄像头的权限：

requestPermission = async () => {
        try {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
                {
                    title: '申请读写手机存储权限',
                    message:
                        '一个很牛逼的应用想借用你的摄像头，' +
                        '然后你就可以拍出酷炫的皂片啦。',
                    buttonNeutral: '等会再问我',
                    buttonNegative: '不行',
                    buttonPositive: '好吧',
                },
            );
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                console.log('现在你获得摄像头权限了');
            } else {
                console.log('用户并不给你');
            }
        } catch (err) {
            console.warn(err);
        }
    };

拍照方法的调用：

handleLaunchCamera = async () => {
        await this.requestPermission()
        let options = {isCrop: true, showCropCircle: true, showCropFrame: false};
        SYImagePicker.openCamera(options, (err, photos) => {
            console.log(err, photos);
            if (!err) {
                this.setState({
                    photos: [...this.state.photos, ...photos]
                })
            }
        })
    };

压缩图片的选择图片的方法

handleOpenImagePicker = () => {
        SYImagePicker.showImagePicker({
            imageCount: 1,
            isRecordSelected: true,
            isCrop: true,
            showCropCircle: true,
            quality: 90,
            compress: true,
            enableBase64: true
        }, (err, photos) => {
            console.log('开启', err, photos);
            if (!err) {
                this.setState({
                    photos
                })
            } else {
                console.log(err)
            }
        })
    };

关闭压缩功能选择图片的方法：

handleAsyncSelectPhoto = async () => {
        // SYImagePicker.removeAllPhoto()
        try {
            const photos = await SYImagePicker.asyncShowImagePicker({
                imageCount: 1,
                isCrop: true,
                showCropCircle: true
            });
            console.log('关闭', photos);
            // 选择成功
            this.setState({
                photos: [...this.state.photos, ...photos]
            })
        } catch (err) {
            console.log(err)
            // 取消选择，err.message为"取消"
        }
    };

选择图片：

handlePromiseSelectPhoto = () => {
        SYImagePicker.asyncShowImagePicker({imageCount: 3, enableBase64: true})
            .then(photos => {
                console.log(photos);
                const arr = photos.map(v => {
                    return {...v, enableBase64: true}
                });
                // 选择成功
                this.setState({
                    photos: [...this.state.photos, ...arr]
                })
            })
            .catch(err => {
                // 取消选择，err.message为"取消"
            })
    };

选择视频

handleOpenVideoPicker = () => {
        SYImagePicker.openVideoPicker({allowPickingMultipleVideo: false}, (err, res) => {
            console.log(err, res);
            if (!err) {
                let photos = [...this.state.photos];
                res.map(v => {
                    photos.push({...v, uri: v.coverUri})
                })
                this.setState({
                    photos
                })
            }
        })
    };

清除缓存

handleDeleteCache = () => {
        SYImagePicker.deleteCache()
    };