美文网首页
React Native--调用照相机 image-picker

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

作者: AmyConan | 来源:发表于2016-11-11 14:18 被阅读0次

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

    使用

    相关文章

      网友评论

          本文标题:React Native--调用照相机 image-picker

          本文链接:https://www.haomeiwen.com/subject/torfpttx.html