React Native Image Picker使用笔记

1.React Native Image Picker 简介

这是一个用于选择手机上的图片或视频的组件

官方github仓库地址
注意

我当前使用的react native 版本为："react-native": "0.63.4"

2.安装

npm i react-native-image-picker

3.链接库（RN版本在0.6以上的可以忽略）

3.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')
复制代码

3.2 android\app\build.gradle

dependencies {
     implementation project(':react-native-image-picker')
}
复制代码

3.3 设置AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.social_app" xmlns:tools="http://schemas.android.com/tools">
................
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-sdk tools:overrideLibrary="com.imagepicker"/>
    <application
      android:requestLegacyExternalStorage="true">
................
    </application>

</manifest>

复制代码

3.4 如果你的RN版本大于0.6手动进行了链接之后可能会报错。应该是0.6版本以上的版本，引入大多数的第三方包都不需要手动链接。

//android\app\src\main\java\com\social_app\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)
        );
    }
}

//android\app\src\main\java\com\social_app\MainActivity.java
// 1. 添加以下两行：
    import com.imagepicker.permissions.OnImagePickerPermissionsCallback; // <- add this import
    import com.facebook.react.modules.core.PermissionListener; // <- add this import

    public class MainActivity extends ReactActivity {
        // 2. 添加如下一行：
        private PermissionListener listener; // <- add this attribute

        /**
         * Returns the name of the main component registered from JavaScript.
         * This is used to schedule rendering of the component.
         */
        @Override
        protected String getMainComponentName() {
            return "native_camera";
        }
    }
复制代码

4. 使用过程中可能会遇到的问题

4.1、报错 提示 image-picker 和 sdk 版本问题 ，可以打开你项目下android/app/src/main/AndroidManifest.xml文件添加以下两行代码：

xmlns:tools="http://schemas.android.com/tools"
<uses-sdk tools:overrideLibrary="com.imagepicker"/>
复制代码

4.2. 调试错误

• Task :app:processDebugManifest FAILED

错误的原因：其实这种Manifest merger可以归结为，AndroidManifest.xml或者build.gradle中的配置问题。详细错误，可看gradle console即在as右下角位置。

4.3 打包错误

• 原因：

这个问题原本不是rn版本的问题，原因是0.61.3将Android SDK的版本更新到28了，这与有些原生代码的插件不兼容了，因为第三方更新不及时，SDK还是旧的版本。

修改这几个地方即可

• 参考ReactNative打包错误：Execution failed for task ‘:xxxxx:verifyReleaseResources’.

4.4 参考

react-native-image-picker 2.x版本和3.x版本（最新版本）的使用详解

错误解析