- 参考:https://reactnative.dev/docs/environment-setup,准备一个ReactNative工程
- 环境准备:Node、Java、Android
- 准备ReactNative工程:npx react-native init AwesomeProject
- 启动metro:npx react-native start
- 负责动态编译ReactNative工程JS代码,调试时可以改代码动态刷新
- 编译android项目并安装运行:npx react-native run-android
- 参考:https://github.com/facebook/react-native/wiki/Building-from-source,准备源码编译环境
- 根据文档要求准备环境,下载指定版本的ndk,设置环境变量、工程local.properties
- 当前最新版本的ReactNative要求:
- Android SDK version 30
- Android NDK 21.4.7075529
- 设置环境变量:
- export ANDROID_SDK=/Users/your_unix_name/android-sdk-macosx
- export ANDROID_NDK=/Users/your_unix_name/android-ndk/android-ndk-r20b
- 在项目工程中的local.properties中指定:
- sdk.dir=/Users/your_unix_name/android-sdk-macosx
- ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r20b
- 当前最新版本的ReactNative要求:
- 根据文档要求准备环境,下载指定版本的ndk,设置环境变量、工程local.properties
- 在工程的node_modules中,用react-native源码替代原来的react-native目录,并在刚刚clone下来的目录中npm install或者yarn
参考最开头的文档,修改工程配置
在android/build.gradle中添加gradle-download-task依赖:
...
dependencies {
classpath 'com.android.tools.build:gradle:4.2.2'
classpath 'de.undercouch:gradle-download-task:4.0.0'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
...
在settings.gradle中配置node_modules中的ReactAndroid工程: ```typescript pluginManagement { repositories { gradlePluginPortal() mavenLocal() google() } }
…
include ‘:ReactAndroid’ project(‘:ReactAndroid’).projectDir = new File( rootProject.projectDir, ‘../node_modules/react-native/ReactAndroid’)
// Includes React Native Gradle Plugin into Gradle project. Required by :ReactAndroid
project configuration.
includeBuild(‘../node_modules/react-native/packages/react-native-gradle-plugin’)
…
- 如果使用0.67之前的源码,得参考这里再在settings.gradle中加几行,不然编译错误:[https://github.com/facebook/react-native/issues/31176](https://github.com/facebook/react-native/issues/31176)
```typescript
include(":packages:react-native-codegen:android")
project(":packages:react-native-codegen:android").projectDir = new File(rootProject.projectDir,
"../node_modules/react-native/packages/react-native-codegen/android")
includeBuild("../node_modules/react-native/packages/react-native-codegen/android")
修改android/app/build.gradle,不再依赖构建好的ReactAndroid,而是依赖上面配置的ReactAndroid工程:
...
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
// 下面这行替代原来的 implementation 'com.facebook.react:react-native:+'
implementation project(':ReactAndroid')
...
}
...
修改android/build.gradle,确保所有依赖ReactNative的三方工程都依赖ReactAndroid项目,而不是预构建好的版本:
allprojects {
repositories { ... }
configurations.all {
resolutionStrategy {
dependencySubstitution {
substitute module("com.facebook.react:react-native:+") with project(":ReactAndroid")
}
}
}
}
可能还需要修改:gradle.properties:
...
ANDROID_NDK_VERSION=20.1.5948944
# 如果指定了下面这个NDK路径,local.properties中指定的需要删掉
ANDROID_NDK_PATH=/Users/gaolinfeng/ndk/android-ndk-r20b
# 仅构建一个ABI,节约构建时间,需要改成和设备匹配的
reactNativeDebugArchitectures=arm64-v8
...
- 打开Android studio,open android目录;
- 直接使用Android studio的run按钮只会构建Android包,不会打包JS,应该使用npm start进行构建;