react-native-image-picker配置

最新推荐文章于 2024-08-12 08:44:40 发布

RitchieWei

最新推荐文章于 2024-08-12 08:44:40 发布

阅读量815

点赞数

分类专栏： React Native

本文链接：https://blog.csdn.net/u012878818/article/details/77447814

版权

React Native 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

        })
    }

结果：