nativereact图片多选_reactnativeimagepicker集成，使用（选择，删除）

1.安装依赖

yarn add react-native-image-picker

react-native link

2.适配安卓

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

include &＃39;:react-native-image-picker&＃39;

project(&＃39;:react-native-image-picker&＃39;).projectDir &＃61; new File(settingsDir, &＃39;../node_modules/react-native-image-picker/android&＃39;)

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

compile project(&＃39;:react-native-image-picker&＃39;)

④ /android/app/src/main/java/com/newredsj/MainApplication.java文件中导入包&＃xff0c;方法

import com.imagepicker.ImagePickerPackage;

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

3.使用

① 设置option

const options &＃61; {

title: &＃39;选择图片&＃39;,

cancelButtonTitle: &＃39;取消&＃39;,

takePhotoButtonTitle: &＃39;拍照&＃39;,

chooseFromLibraryButtonTitle: &＃39;图片库&＃39;,

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

storageOptions: {

skipBackup: true,

path: &＃39;images&＃39;,

},

};

② 选择图片fn

showImagePicker () {

ImagePicker.showImagePicker (options, response &＃61;> {

console.log(response);

if (response.didCancel) {

console.log (&＃39;用户点击了取消&＃39;);

} else if (response.error) {

console.log (&＃39;ImagePicker 出错: &＃39;, response.error);

} else {

let source;

if (Config.isAndroid) {

source &＃61; {uri: response.uri, isStatic: true};

} else {

source &＃61; {uri: response.uri.replace (&＃39;file://&＃39;, &＃39;&＃39;), isStatic: true};

}

let photobase &＃61; &＃39;data:image/jpeg;base64,&＃39;&＃43; response.data (需要base64上传得时候添加)

let imageArray &＃61; this.state.avatarSource;

let fileArray &＃61; 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&＃61;{require (&＃39;../Image/Common/line.png&＃39;)}

style&＃61;{styles.image}

>

上传图片

)

}

④ 操作及展示renderView

_renderView &＃61; () &＃61;> {

let arr &＃61; [];

if(this.state.avatarSource!&＃61;&＃39;&＃39;){

for (let index &＃61; 0; index

arr.push(

source&＃61;{this.state.avatarSource[index]}

style&＃61;{styles.imageL}

imageStyle&＃61;{{resizeMode: &＃39;cover&＃39;}}

key&＃61;{index}

>

onPress&＃61;{this.deleteLoadedImage.bind (this, index)}

style&＃61;{styles.rightDelButton}

>

}

return arr;

}

}

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

⑥ 至于上传可用 fetch&＃xff0c;axios 等。个人推荐npm&＃xff1a;axios

最后效果图

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

学习使人快乐&＃xff0c;代码改变人生&＃xff0c;新手上路&＃xff0c;各路大神&＃xff0c;不喜勿碰&＃xff01;求反馈&＃xff01;