美文网首页RNRN 笔记Hybrid开发
react-native-image-picker集成

react-native-image-picker集成

作者: 既然可以颠覆何必循规蹈矩 | 来源:发表于2018-01-23 16:38 被阅读3314次

组件的github地址 https://github.com/react-community/react-native-image-picker

安装

yarn add react-native-image-picker

保险起见 执行下 react-native link

适配IOS

1.添加权限
在info.plist中配置

NSPhotoLibraryUsageDescription

NSCameraUsageDescription

(会自动添加Privacy - Camera Usage Description和Privacy - Photo Library Usage Description,避免查找麻烦)


ios1.png

2.下图两处是否自动添加上了,如果没有link 或者手动添加

react-native link react-native-image-picker
ios2.png

适配android

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

<uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

2.link后下面的默认已经添加了,最好检查一下
android/settings.gradle文件中

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方法中

JS代码

先定义

const photoOptions = {
    title:'请选择',
    quality: 0.8,
    cancelButtonTitle:'取消',
    takePhotoButtonTitle:'拍照',
    chooseFromLibraryButtonTitle:'选择相册',
    allowsEditing: true,
    noData: false,
    storageOptions: {
        skipBackup: true,
        path: 'images'
    }
};

再使用

choosePicker=()=>{
        ImagePicker.showImagePicker(photoOptions, (response) => {
            console.log('Response = ', response);
            if (response.didCancel) {
                console.log('User cancelled image picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }
            else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            }
            else {
                let source = { uri: response.uri };
                // You can also display the image using data:
                // let source = { uri: 'data:image/jpeg;base64,' + response.data };
                this.setState({
                    avatarSource: source
                });
            }
        });
    }

OK,完结! 有问题可以加QQ群讨论:131657381
之前我也文章也是可以任意转载的,但是有些人原封不动copy过去,也不说明是转载的,所以以后我的文章未经本人同意禁止转载,谢谢!

相关文章

网友评论

  • 黎峰麟:就是找不到什么配置请求路径 我从新建一个新项目试试看吧
  • 黎峰麟:你好 我使用RN 5.1 导入这个包时候 安卓编译出错 iOS正常运行 不知道你有没有遇到过
    Gradle sync failed: Cause: unable to find valid certification path to requested target
    Consult IDE log for more details (Help | Show Log) (5s 533ms)
    既然可以颠覆何必循规蹈矩:@黎峰麟 你看日志了没,我现在也是5点多的版本,没有问题的

本文标题:react-native-image-picker集成

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