4.React Native接入原生项目的一些问题

前端之家收集整理的这篇文章主要介绍了4.React Native接入原生项目的一些问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近有人问我没有新学什么东西,我确实想不到新学了什么,就脱口而出了React Native,然后就问能告诉他React Native是什么吗?发现自己一点都说不出来是什么。学习一门新的知识我们到底是学的什么呢?或许真的该好好的想想。还有

言归正传,这周花在React Native上面的时间不是很多,任务比较多。但是把React Native作为一个Library导入了一个原生的Android项目。

接入步骤

接入的时候是作为一个Library(方便管理)接入的,可能不同人接入的方式不同。按自己的方式接入就好。

  • 创建一个Library的module。
  • 在项目根目录下面执行下面代码
npm init // 用来创建配置文件package.json,这个过程需要输入响应的版本信息等等。
npm install --save react react-native // 在项目中安装React Native
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig  // 文件监控
"start": "node node_modules/react-native/local-cli/cli.js start"
  • 在上面的第二个步骤完成以后,根目录下面就会多出node_modules文件夹,需要使用的也是这个目录下面的内容。在根目录下面build.gradle和React-Native-Library目录下面分别增加
// 根目录下面build.gradle
buildscript {
    repositories {
        mavenCentral()  // 增加maven库的依赖
    }
}

allprojects {
    repositories {
        jcenter()
        maven {
            // All of React Native (JS,Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"  // 使用当前根目录下面的这个路径作为本地maven库
        }
    }
}

// library下面的build.gradle
dependencies {
    compile "com.facebook.react:react-native:+"  // 最终使用的是node_modules/react-native/android下面的依赖
}
  • 上面的步骤完成以后一个基本的library就做好了,接下来就跟使用普通的library一样了。(这个步骤可能不同人碰到的问题就不用了,特别是项目的规模不同遇到的问题可能就更加不同,下面列出我碰到的一些问题)

碰到的问题

  • minSdkVersion兼容,react native需要api 16以上才能使用,低于这个版本就需要做一些特殊的处理。
// 允许用户忽略最低的SDK版本而选择哪些库可以被导入
<uses-sdk tools:overrideLibrary="com.facebook.react"/>
  • Error: NDK integration is deprecated in the current plugin. Consider trying the new experimental plugin. For details,see http://tools.android.com/tech-docs/new-build-system/gradle-experimental. Set “android.useDeprecatedNdk=true” in gradle.properties to continue using the current NDK integration. 这个问题字面意思就可以理解了,React Native是使用比较低版本的ndk编译的,所以需要在gradle.properties文件加上android.useDeprecatedNdk=true就好了。

  • so的问题。React Native会生成armeabi-v7a和x86的so文件,如果刚好使用这两种so的话就不用需改了,但是相当一部分的apk为了包的大小,同时armeabi理论上是可以在所有架构上运行的。所以一般只会使用armeabi的so(armeabi-v7a是不兼容x86的,这样直接把armeabi-v7a中的so拷贝到armeabi中可能是有问题的,需要测试的。)。

// 将react native编译的armeabi-v7a的so文件拷贝到library(library中新建lib/armeabi/下面)中.
   sourceSets{
        main {
            jniLibs.srcDirs = ['lib']  // 设置加载so的路径
        }
    }

// 在引用library的工程中设置只加载armeabi的so
android {
    defaultConfig {
        ndk {
            abiFilters 'armeabi'
        }
    }
}
  • so的问题。com.android.build.api.transform.TransformException: com.android.builder.packaging.DuplicateFileException: Duplicate files copied in APK lib/armeabi/libicu_common.so 会提示libicu_common.so和libimagepipeline.so重复了,找了一些办法但是就是没有解决,最终直接是把这两个so给删除了,这个两个so应该是在fresco中有使用。

参考

integration with existing apps

猜你在找的React相关文章