React Native源码编译

编译环境

  1. Android SDK React Native要求的编译sdk版本最低为23 务必下载好对应版本
  2. buildToolsversion 23.0.2
  3. minSdkVersion 16
  4. ndk 版本r10e (我编译的源码版本是0.35.0-rc.0,r11b版本NDK 编译报错,这里NDK版本务必使用r10e版本)

设置路径

  1. local.properties 设置ndk.dir,sdk.dir
  2. 安装react-native,也可以复制之前下好的node_modules.由于不是所有人都要开发rn,所以我没有把rn相关的目录放在as的项目的目录下,这样要对android/settings.gradle 做一点修改添加
    include ':ReactAndroid'
    project(':ReactAndroid').projectDir = new File(rootProject.projectDir,'../RNpro/node_modules/react-native/ReactAndroid')
    这样js可以可以用的单独的git管理,不影响android工程,便于android和ios协同开发。
  3. 在app/build.gradle中添加依赖compile project(':ReactAndroid'),替换之前的预编译包的依赖
  4. 在as中run你的工程,在node_modules所在路径下运行npm start

编译中遇到的问题

查看node_modules/react-native/ReactAndroid/build.gradle文件,我们发现又很多的task,源码编译时会依次执行这些task,因为网络环境的问题,这些task可能会执行失败,我们可以根据这些task源码,配合错误log定位解决问题。下面给几种我遇到的编译错误

1.Error:Execution Failed for task ':ReactAndroid:downloadBoost'.
> java.io.FileNotFoundException: http://nchc.dl.sourceforge.net/project/boost/boost/1.57.0/boost_1_57_0.zip
手动下载boost_1_57_0.zip 复制到/node_modules/react-native/ReactAndroid/build/downloads目录下,下载不了请使用vpn。

2.Error:Execution Failed for task ':ReactAndroid:downloadJSCHeaders'.
> java.net.UnkNownHostException: svn.webkit.org
https://svn.webkit.org/repository/webkit/!svn/bc/174650/trunk/Source/JavaScriptCore/API/ 下载['JavaScript.h','JSBase.h','jscontextRef.h','JSObjectRef.h','JSRetainPtr.h','JsstringRef.h','JSValueRef.h','WebKitAvailability.h']
复制到/node_modules/react-native/ReactAndroid/build/downloads/jsc目录下没有文件夹自己创建。

3.Error:Execution Failed for task ':ReactAndroid:buildreactNdkLib'.
> Process 'command '/Users/shixiang/Library/Android/android-ndk-r11b/ndk-build'' finished with non-zero exit value 2
这个是我遇到的ndk版本问题,使用android-ndk-r10e后正常。

4.修改源码需要重新make project,clean工程会重新下载所有的文件

Github

参考文献

[1]Building React Native from source

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...