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

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文件下添加权限:

5.在文件MainApplication.java添加link

import com.imagepicker.ImagePickerPackage;

  ...

@Override
protected List getPackages() {
  return Arrays.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
            });
        }
    });
}
效果如下:

React-Native:react-native-image-picker Android用法_第1张图片

 

 

你可能感兴趣的:(Android)