react-native-image-picker配置

测试环境：android   react-native 0.47.1 

1、 npm install react-native-image-picker@latest --save

2、react-native link

Android：

1、在文件   android/settings.gradle中 添加

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

2、更改 android/build.gradle:

buildscript {
    ...
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.+' // <- USE 2.2.+ version
    }
    ...
}
...

3、更改   android/gradle/wrapper/gradle-wrapper.properties :

...
distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip

4、在文件 android/app/build.gradle中添加

dependencies {
    compile project(':react-native-image-picker')
}

5、在文件 android/app/src/main/AndroidManifest.xml中添加

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

6、在文件 MainApplication.java中添加

import com.imagepicker.ImagePickerPackage; // <-- add this import

public class MainApplication extends Application implements ReactApplication {
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new ImagePickerPackage() // <-- add this line
            // OR if you want to customize dialog style
            new ImagePickerPackage(R.style.my_dialog_style)
        );
    }
}

7、配置弹窗样式 android/app/res/values/themes.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="DefaultExplainingPermissionsTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
        <!-- Used for the buttons -->
        <item name="colorAccent">#61c3e7</item>
        <!-- Used for the title and text -->
        <item name="android:textColorPrimary">#3d3d3d</item>
        <!-- Used for the background -->
        <item name="android:background">@android:color/white</item>
    </style>
</resources>

使用：

import  ImagePicker from 'react-native-image-picker'; //第三方相机
var photoOptions = {
    //底部弹出框选项
    title:'请选择',
    cancelButtonTitle:'取消',
    takePhotoButtonTitle:'拍照',
    chooseFromLibraryButtonTitle:'相册',
    quality:0.75,
    allowsEditing:true,
    noData:false,
    storageOptions: {
        skipBackup: true,
        path:'images'
    }
}

 <Text onPress={()=>this.openMycamera()}>选择文件</Text>


openMycamera = () =>{
        ImagePicker.showImagePicker(photoOptions,(response) =>{
            console.log('response'+response);
            if (response.didCancel){
                return
            }

        })
    }




结果：