react-native-image-picker配置

来源：互联网发布：app应用下载推广源码编辑：程序博客网时间：2024/06/05 23:52

测试环境：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 importpublic 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            }        })    }

结果：

阅读全文

0 0