React Native--调用照相机 image-picker-react-native

参照网址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中的

使用