最近项目用Taro框架，目的就是为了一套代码生成多端代码啦。框架也说到对RN的兼容性较差，这里就是对RN的踩坑日记啦。

项目中涉及到图片上传功能，在官方文档中chooseImage 对RN端是支持的，但在选择本地相册时，报如下错误

image.png

如果你也遇到这歌问题，这篇文章兴许会对你有帮助。

官方给了一个react native 的盒子taro-native-shell，接下来的操作就是在这个盒子里。首先要说一下taro的图片上传功能，用的是RN的第三方插件react-native-image-crop-picker。会报上面的错误，是在盒子里没有做相应的配置。

注意：下边所有的操作都在盒子里，目前只配置安卓环境，ios的后续会追加

step 1

npm i react-native-image-crop-picker --save

或者

yarn add react-native-image-crop-picker

step 2

react-native link react-native-image-crop-picker

安卓配置

• 确保你使用的Gradle >= 2.2.x (android/build.gradle)

buildscript {
    ...
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.3'
        ...
    }
    ...
}

image.png

• 在android/build.gradle路径下添加两行代码

allprojects {
    repositories {
      mavenLocal()
      jcenter()
      maven { url "$rootDir/../node_modules/react-native/android" }

      // ADD THIS
      maven { url 'https://maven.google.com' }

      // ADD THIS
      maven { url "https://jitpack.io" }
    }
}

image.png

• 添加useSupportLibrary (android/app/build.gradle)

android {
    ...

    defaultConfig {
        ...
        vectorDrawables.useSupportLibrary = true
        ...
    }
    ...
}

image.png

• Android SDK >= 26 (android/app/build.gradle)

android {
    compileSdkVersion 27
    buildToolsVersion "27.0.3"
    ...
    
    defaultConfig {
      ...
      targetSdkVersion 27
      ...
    }
    ...
}

image.png

• 添加下面三行代码在android/app\src\main\AndroidManifest.xml

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

image.png

此时运行 react-native run-android,会报如下错误

image.png

此时我们只需将react-native-image-crop-picker库做降级处理即可

image.png

最终实现效果

videoGif.gif

videoGif1.gif