native react 图片多选_react-native-image-picker 集成，使用（选择，删除）

1.安装依赖

yarn add react-native-image-picker

react-native link

2.适配安卓

①. /android/app/src/main/AndroidManifest.xml文件中添加权限

include ':react-native-image-picker'

project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')

③ android/app/build.gradle文件的dependencies中添加

compile project(':react-native-image-picker')

④ /android/app/src/main/java/com/newredsj/MainApplication.java文件中导入包，方法

import com.imagepicker.ImagePickerPackage;

new ImagePickerPackage() //在getPackages方法添加

3.使用

① 设置option

const options = {

title: '选择图片',

cancelButtonTitle: '取消',

takePhotoButtonTitle: '拍照',

chooseFromLibraryButtonTitle: '图片库',

...........,

storageOptions: {

skipBackup: true,

path: 'images',

},

};

② 选择图片fn

showImagePicker () {

ImagePicker.showImagePicker (options, response => {

console.log(response);

if (response.didCancel) {

console.log ('用户点击了取消');

} else if (response.error) {

console.log ('ImagePicker 出错: ', response.error);

} else {

let source;

if (Config.isAndroid) {

source = {uri: response.uri, isStatic: true};

} else {

source = {uri: response.uri.replace ('file://', ''), isStatic: true};

}

let photobase = 'data:image/jpeg;base64,'+ response.data (需要base64上传得时候添加)

let imageArray = this.state.avatarSource;

let fileArray = this.state.upfileData;

imageArray.push (source);

fileArray.push(photobase)

this.setState ({

avatarSource: imageArray,

upfileData:fileArray

});

this.props._selectPhotoFun(this.state.upfileData)

}

});

}

③ 选择图片得renderView

_renderAddImage(){

return (

source={require ('../Image/Common/line.png')}

style={styles.image}

>

上传图片

)

}

④ 操作及展示renderView

_renderView = () => {

let arr = [];

if(this.state.avatarSource!=''){

for (let index = 0; index < this.state.avatarSource.length; index++) {

arr.push(

source={this.state.avatarSource[index]}

style={styles.imageL}

imageStyle={{resizeMode: 'cover'}}

key={index}

>

onPress={this.deleteLoadedImage.bind (this, index)}

style={styles.rightDelButton}

>

)

}

return arr;

}

}

⑤ 删除就是简单得数组操作就不上代码了

⑥ 至于上传可用 fetch，axios 等。个人推荐npm：axios

最后效果图

其实开发过程中麻烦得也就是布局，其他操作看个人喜好，以及业务需求！

学习使人快乐，代码改变人生，新手上路，各路大神，不喜勿碰！求反馈！