参照网址https://github.com/marcshilling/react-native-image-picker
1.cmd到项目根目录，执行命令
npm install react-native-image-picker@latest --save
2.android/settings.gradle文件添加
include':react-native-image-picker'project(':react-native-image-picker').projectDir=newFile(settingsDir,'../node_modules/react-native-image-picker/android')
settingsDir参照配置文件settings.gradle中上面的修改
3.file: android/app/build.gradle
dependencies{...
compile project(':react-native-image-picker')
}
4.file: android/app/src/main/AndroidManifest.xml
5.// file: android/app/src/main/java/com/<...>/MainApplication.java
...importcom.imagepicker.ImagePickerPackage;// <-- add this importpublicclassMainApplicationextendsApplicationimplementsReactApplication{@OverrideprotectedListgetPackages() {returnArrays.asList(newMainReactPackage(),newImagePickerPackage()// <-- add this line);
}...}
6.Usage
varPlatform=require('react-native').Platform;varImagePicker=require('react-native-image-picker');// More info on all the options is below in the README...just some common use cases shown herevaroptions={
title:'Select Avatar',
customButtons:[
{name:'fb', title:'Choose Photo from Facebook'},
],
storageOptions:{
skipBackup:true,
path:'images'}
};/*** The first arg is the options object for customization (it can also be null or omitted for default options),* The second arg is the callback which sends object: response (more info below in README)*/ImagePicker.showImagePicker(options, (response)=>{console.log('Response = ', response);if(response.didCancel) {console.log('User cancelled image picker');
}elseif(response.error) {console.log('ImagePicker Error: ', response.error);
}elseif(response.customButton) {console.log('User tapped custom button: ', response.customButton);
}else{// You can display the image using either data...constsource={uri:'data:image/jpeg;base64,'+response.data, isStatic:true};// or a reference to the platform specific asset locationif(Platform.OS==='ios') {constsource={uri:response.uri.replace('file://',''), isStatic:true};
}else{constsource={uri:response.uri, isStatic:true};
}this.setState({
avatarSource:source
});
}
});
或者是参照上面链接中的example中的
