React Native 开发环境准备

一、环境准备

我的环境：

二、建立独立RN工程

1、初始化创建工程

npx react-native init RNApp --version 0.73.4 --skip-install 这个命令提示：

��️ The `init` command is deprecated.

E:\android\projects\RNDemo4>cd RNApp

- Switch to npx @react-native-community/cli init for the identical behavior.

- Refer to the documentation for information about alternative tools: https://reactnative.dev/docs/getting-started

Exiting...

提示命令过时了，执行调用 ：

npx @react-native-community/cli init RNApp --version 0.73.4 --skip-install

执行完显示：

现在目录结构如下：

2、进入RN工程目录，安装依赖

# 进入CLI自动生成的RN工程目录（内层RNApp）

cd E:/android/projects/RNDemo4/RNApp/RNApp

# 安装依赖（淘宝镜像加速）

npm install --registry=https://registry.npm.taobao.org

上面这个命令卡住了，清空缓存重试：

# 1. 进入内层RNApp目录（必选，确保路径正确）

cd E:/android/projects/RNDemo4/RNApp/RNApp

# 2. 清空npm缓存（--force强制清空）

npm cache clean --force

# 3. 重新安装（改用更稳定的镜像，同时限制网络超时）

npm install --registry=https://registry.npmmirror.com --timeout=600000

执行完验证是否安装成功：

或者看下面：

Ok. RN工程依赖安装成功。

三、新建安卓原生工程 （上面这个Metro服务启动成功的窗口先保持，不关闭）

最小sdk 我选29. jdk版本17.

libs.versions.toml 文件修改如下：

1[versions]
2agp = "8.2.0"
3kotlin = "1.9.20"
4coreKtx = "1.10.1"
5junit = "4.13.2"
6junitVersion = "1.1.5"
7espressoCore = "3.5.1"
8lifecycleRuntimeKtx = "2.6.1"
9
10[libraries]
11androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
12junit = { group = "junit", name = "junit", version.ref = "junit" }
13androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
14androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
15androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
16
17[plugins]
18android-application = { id = "com.android.application", version.ref = "agp" }
19kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }

模块级build.gradle修改为：

1plugins {
2    alias(libs.plugins.android.application)
3    alias(libs.plugins.kotlin.android)
4}
5
6android {
7    namespace 'com.example.androidapp'
8    compileSdk 34
9
10    // 引入本地libs（兜底，若Gradle依赖仍有问题）
11    repositories {
12        flatDir {
13            dirs 'libs'
14        }
15    }
16
17    defaultConfig {
18        applicationId "com.example.androidapp"
19        minSdk 29
20        targetSdk 34
21        versionCode 1
22        versionName "1.0"
23
24        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
25        ndk {
26            abiFilters 'armeabi-v7a', 'x86', 'x86_64', 'arm64-v8a'
27        }
28    }
29
30    buildTypes {
31        release {
32            minifyEnabled false
33            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
34        }
35    }
36    compileOptions {
37        sourceCompatibility JavaVersion.VERSION_17
38        targetCompatibility JavaVersion.VERSION_17
39    }
40    kotlinOptions {
41        jvmTarget = '17'
42    }
43    packaging {
44        resources {
45            excludes += ["META-INF/LICENSE.md", "META-INF/LICENSE-notice.md"]
46        }
47    }
48}
49
50dependencies {
51    // 原生基础依赖
52    implementation libs.androidx.core.ktx
53    implementation libs.androidx.lifecycle.runtime.ktx
54    testImplementation libs.junit
55    androidTestImplementation libs.androidx.junit
56    androidTestImplementation libs.androidx.espresso.core
57
58    // 🔴 核心修复：用react-android替代react-native（适配0.70+拆分版）
59    implementation "com.facebook.react:react-android:0.73.4"
60    implementation "com.facebook.react:hermes-android:0.73.4" // 可选，Hermes引擎
61    implementation "com.facebook.soloader:soloader:0.10.5" // RN必需
62}

项目根目录build.gradle文件内容：

1buildscript {
2    ext {
3        buildToolsVersion = "34.0.0"
4        minSdkVersion = 29
5        compileSdkVersion = 34
6        targetSdkVersion = 34
7        reactNativeVersion = "0.73.4"
8    }
9    repositories {
10        google()
11        mavenCentral()
12        maven { url "https://maven.aliyun.com/repository/central" }
13    }
14}
15
16plugins {
17    alias(libs.plugins.android.application) apply false
18    alias(libs.plugins.kotlin.android) apply false
19}
20
21allprojects {
22    repositories {
23        google()
24        mavenCentral()
25        maven { url "https://maven.aliyun.com/repository/public/" }
26        // RN官方Maven仓库（兜底）
27        maven { url "https://repo1.maven.org/maven2/" }
28    }
29}
30
31task clean(type: Delete) {
32    delete rootProject.buildDir
33}

settings.gradle内容如下：

1pluginManagement {
2    repositories {
3        google {
4            content {
5                includeGroupByRegex("com\\.android.*")
6                includeGroupByRegex("com\\.google.*")
7                includeGroupByRegex("androidx.*")
8            }
9        }
10        mavenCentral()
11        gradlePluginPortal()
12        // 1. 新增：添加阿里云镜像（解决插件下载慢/失败）
13        maven { url "https://maven.aliyun.com/repository/public/" }
14    }
15}
16dependencyResolutionManagement {
17    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
18    repositories {
19        google()
20        mavenCentral()
21        // 2. 新增：添加RN依赖的本地仓库路径（和根build.gradle的allprojects一致）
22        maven { url "E:/android/projects/RNDemo4/RNApp/RNApp/node_modules/react-native/android" }
23        maven { url "E:/android/projects/RNDemo4/RNApp/RNApp/node_modules/jsc-android/dist" }
24        // 新增：阿里云镜像（加速RN依赖下载）
25        maven { url "https://maven.aliyun.com/repository/public/" }
26    }
27}
28
29rootProject.name = "AndroidApp"
30include ':app'
31

gradle-wrapper.properties文件内容如下：

1#Tue Feb 17 21:48:50 CST 2026
2distributionBase=GRADLE_USER_HOME
3distributionPath=wrapper/dists
4#distributionSha256Sum=a17ddd85a26b6a7f5ddb71ff8b05fc5104c0202c6e64782429790c933686c806
5#distributionUrl=https\://services.gradle.org/distributions/gradle-9.1.0-bin.zip
6#distributionUrl=https\://services.gradle.org/distributions/gradle-8.5-bin.zip
7distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-8.5-bin.zip
8# ?????????SHA256???
9distributionSha256Sum=9d926787066a081739e8200858338b4a69e837c3a821a33aca9db09dd4a41026
10networkTimeout=10000
11validateDistributionUrl=true
12zipStoreBase=GRADLE_USER_HOME
13zipStorePath=wrapper/dists
14

MainApplication代码如下：

1package com.example.androidapp 
2
3import android.app.Application
4import com.facebook.react.ReactApplication // 保留接口
5import com.facebook.react.ReactNativeHost
6import com.facebook.react.ReactPackage
7import com.facebook.react.defaults.DefaultReactNativeHost
8import com.facebook.react.shell.MainReactPackage
9import com.facebook.soloader.SoLoader
10import java.util.ArrayList
11
12// 实现ReactApplication接口（匹配抽象属性定义）
13class MainApplication : Application(), ReactApplication {
14    // 🔴 核心修改：把方法改为接口要求的抽象属性（val）
15    override val reactNativeHost: ReactNativeHost = object : DefaultReactNativeHost(this) {
16        override fun getPackages(): List<ReactPackage> {
17            val packages = ArrayList<ReactPackage>()
18            packages.add(MainReactPackage()) // RN核心包
19            return packages
20        }
21
22        override fun getJSMainModuleName(): String {
23            return "index"
24        }
25
26        // 调试模式开启（直接返回true，避免BuildConfig问题）
27        override fun getUseDeveloperSupport(): Boolean {
28            return true
29        }
30
31        // 关闭新架构，避免额外依赖
32        override val isNewArchEnabled: Boolean
33            get() = false
34        override val isHermesEnabled: Boolean
35            get() = true
36    }
37
38    override fun onCreate() {
39        super.onCreate()
40        SoLoader.init(this, false)
41    }
42}

MainActiivty代码如下：

1package com.example.androidapp
2
3import com.facebook.react.ReactActivity
4import com.facebook.react.ReactActivityDelegate
5import com.facebook.react.defaults.DefaultReactActivityDelegate
6
7class MainActivity : ReactActivity() {
8    // 必须和RN工程package.json的name一致（RNApp）
9    override fun getMainComponentName(): String {
10        return "RNApp"
11    }
12
13    override fun createReactActivityDelegate(): ReactActivityDelegate {
14        return DefaultReactActivityDelegate(this, mainComponentName, false)
15    }
16}

AndroidManifest文件内容如下：

1<?xml version="1.0" encoding="utf-8"?>
2<manifest xmlns:android="http://schemas.android.com/apk/res/android">
3    <uses-permission android:name="android.permission.INTERNET" />
4
5    <application
6        android:name=".MainApplication"
7        android:allowBackup="true"
8        android:icon="@mipmap/ic_launcher"
9        android:label="@string/app_name"
10        android:roundIcon="@mipmap/ic_launcher_round"
11        android:supportsRtl="true"
12    android:theme="@style/AppTheme">
13        <activity
14            android:name=".MainActivity"
15            android:exported="true"
16            android:launchMode="singleTask"
17        android:theme="@style/AppTheme">
18            <intent-filter>
19                <action android:name="android.intent.action.MAIN" />
20                <category android:name="android.intent.category.LAUNCHER" />
21            </intent-filter>
22        </activity>
23        <activity
24            android:name="com.facebook.react.devsupport.DevSettingsActivity"
25            android:exported="false" />
26    </application>
27</manifest>

styles.xml文件内容如下：

1<?xml version="1.0" encoding="utf-8"?>
2<resources>
3    <!-- 🔴 核心修改：自定义样式名改为AppTheme（唯一，不冲突） -->
4    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
5        <!-- 可选：自定义主题属性（比如背景色） -->
6        <item name="android:windowBackground">@android:color/white</item>
7        <item name="android:statusBarColor">@android:color/white</item>
8    </style>
9</resources>

然后同步成功。

四、安卓RN工程依赖

提示有一些漏洞，修复漏洞：

启动Metro服务：

adb reverse tcp:8081 tcp:8081

npx react-native start --port 8081

运行起来加载RN页面失败。尝试了各种方式失败，比如在RN页面摇一摇，设置调试的ip和端口号都没用，关闭防火墙都没用。

五、尝试离线bundle方案：

1. 打包RN离线文件，在RN工程目录执行

cd /d E:\android\projects\RNDemo4\RNApp\RNApp

# 生成bundle和资源（仅依赖本地RN环境，无需下载Gradle）

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

发现创建了以下目录和文件：

但是assets文件夹没有生成。手动新建该目录。再重新执行命令生成bundle 文件：

cd /d E:\android\projects\RNDemo4\RNApp\RNApp

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

执行完后可以看到生成了bundle文件。

2、将该bundle文件复制到安卓原生工程的对应目录：

3、修改下MainApplication：

1package com.example.androidapp // 替换为你的实际包名
2
3import android.app.Application
4import com.facebook.react.ReactApplication
5import com.facebook.react.ReactNativeHost
6import com.facebook.react.ReactPackage
7import com.facebook.react.defaults.DefaultReactNativeHost
8import com.facebook.react.shell.MainReactPackage
9import com.facebook.soloader.SoLoader
10import java.util.ArrayList
11
12class MainApplication : Application(), ReactApplication {
13    // 恢复默认的ReactNativeHost写法，仅修正Bundle路径
14    override val reactNativeHost: ReactNativeHost = object : DefaultReactNativeHost(this) {
15        override fun getPackages(): List<ReactPackage> {
16            val packages = ArrayList<ReactPackage>()
17            packages.add(MainReactPackage())
18            return packages
19        }
20
21        override fun getJSMainModuleName(): String {
22            return "index"
23        }
24
25        override fun getUseDeveloperSupport(): Boolean {
26            return true
27        }
28
29        override val isNewArchEnabled: Boolean
30            get() = false
31        override val isHermesEnabled: Boolean
32            get() = true
33
34        // 🔴 改用RN 0.73兼容的assets路径写法（核心修复）
35        override fun getBundleAssetName(): String {
36            return "index.android.bundle"
37        }
38
39        // 注释掉getJSBundleFile，改用getBundleAssetName
40        // override fun getJSBundleFile(): String {
41        //     return "android_asset/index.android.bundle"
42        // }
43    }
44
45    override fun onCreate() {
46        super.onCreate()
47        SoLoader.init(this, false)
48    }
49}

4、运行安卓原生工程，显示页面：

ok. 显示的这个页面就是RN工程中的App.tsx这个页面。

《React Native 开发环境准备》 是转载文章，点击查看原文。