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  // 文件监控

在package.json文件的scripts节点下面增加下面代码：

"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

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

接入步骤

碰到的问题

参考

相关推荐