React-Native：react-native-image-picker Android用法

最新推荐文章于 2024-08-08 08:16:03 发布

醉生梦死玩笑而已

最新推荐文章于 2024-08-08 08:16:03 发布

阅读量987

点赞数

分类专栏： Android 文章标签： Android

本文链接：https://blog.csdn.net/qq_36252342/article/details/82462717

版权

Android 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.第一步终端执行： npm install react-native-image-picker@latest --save 下载下来，

2.然后在文件android/settings.gradle中添加两句话：


include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')

3.后在android/app/build.gradle文件下添加dependencies：

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    compile "com.facebook.react:react-native:+"  // From node_modules
    compile project(':react-native-image-picker')
}

4.在AndroidManifest.xml文件下添加权限：

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

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

5.在文件MainApplication.java添加link

import com.imagepicker.ImagePickerPackage;

...

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new ImagePickerPackage()
  );
}

用法：

selectPhotoTapped() {
    const options = {
        //底部弹出框选项
        title:'请选择',
        cancelButtonTitle:'取消',
        takePhotoButtonTitle:'拍照',
        chooseFromLibraryButtonTitle:'相册选择',
        quality: 1.0,
        maxWidth: 500,
        maxHeight: 500,
        storageOptions: {
            skipBackup: true
        }
    };

    ImagePicker.showImagePicker(options, (response) => {
        console.log('Response = ', response);

        if (response.didCancel) {
            console.log('User cancelled photo 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};
            this.setState({
                avatarSource: source
            });
        }
    });
}
效果如下：