最近项目用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
