一. win10下安装VMware16和ubuntu22

二. 跟着react native官网教程https://reactnative.cn/docs/environment-setup

​1. 全新的ubuntu要安装npm和npx,把nodejs更新到最新版本,本文用的是nodejs22 

2. 使用nrm工具切换淘宝源
npx nrm use taobao

3.安装yarn

npm install -g yarn

4. 安装Watchman -------敲重点

官网:Installation | Watchman

官网给Ubuntu的这个安装方式有点问题,在github链接上只能找到Prebuilt Binaries,找不到.deb文件。

所以只能使用官网给的第二种安装方式

5. 安装Android Studio和Android SDK,配置 ANDROID_HOME 环境变量

我使用的Ubuntu自带的Ubuntu Software软件安装,SDK默认也会被一起安装
​

​这种安装方式,Android SDK 默认被安装在$HOME/Android/sdk下

# 如果你不是通过Android Studio安装的sdk,则其路径可能不同,请自行确定清楚。

使用 

sudo nano ~/.bashrc

然后把下面这几行加入~/.bashrc文件底部

export ANDROID_HOME=$HOME/Android/sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

结果

6. 创建新项目,本人选用在Android Studio下运行

npx @react-native-community/cli init AwesomeProject

7. 准备Android设备,因为主机没启用VT-x,只能选用android真机

参考https://reactnative.cn/docs/running-on-device在设备上运行 · React Native 中文网https://reactnative.cn/docs/running-on-device

关键是确保adb devices 命令能找到android设备

也可以借助Android Studio的Device Manager

8. 编译并运行应用---敲击重点

官网给出的是

cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

运行的时候,往往会被卡在Gradle Daemon上,问DS,调整科学上网的时间和姿势,看人品。。。

本人修改的内容包括但不限于:

        1) 手动下载并安装gradle

       修改 gradle/wrapper/gradle-wrapper.properties的属性

distributionUrl=file:///home/你的路径/gradle/gradle-版本号-bin.zip

           2) 修改gradle/build.gradle文件, 使用国内源

buildscript {
    ext {
        buildToolsVersion = "35.0.0"
        minSdkVersion = 24
        compileSdkVersion = 35
        targetSdkVersion = 35
        ndkVersion = "27.1.12297006"
        kotlinVersion = "2.0.21"
    }
    repositories {
        maven { url 'https://maven.aliyun.com/repository/central' }
        maven { url 'https://maven.aliyun.com/repository/public' }
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
        maven { url 'https://maven.aliyun.com/repository/apache-snapshots' }
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
    }
}


allprojects {
    repositories {
        // 添加国内镜像
        maven { url 'https://maven.aliyun.com/repository/central' }
        maven { url 'https://maven.aliyun.com/repository/public' }
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
        maven { url 'https://maven.aliyun.com/repository/apache-snapshots' }
        mavenCentral()
        google()
        maven { url 'https://jitpack.io' }
    }
}

apply plugin: "com.facebook.react.rootproject"

           3) 修改gradle/gradle.properties文件, 修改属性

# Project-wide Gradle settings.

# IDE (e.g. Android Studio) users:
# Gradle settings configured through the IDE *will override*
# any settings specified in this file.

# For more details on how to configure your build environment visit
# http://www.gradle.org/docs/current/userguide/build_environment.html

# Specifies the JVM arguments used for the daemon process.
# The setting is particularly useful for tweaking memory settings.
# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
# org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
org.gradle.jvmargs=-Xmx4g -XX:MaxMetaspaceSize=2048m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8

# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. More details, visit
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true

# AndroidX package structure to make it clearer which packages are bundled with the
# Android operating system, and which are packaged with your app's APK
# https://developer.android.com/topic/libraries/support-library/androidx-rn
android.useAndroidX=true

# Use this property to specify which architecture you want to build.
# You can also override it from the CLI using
# ./gradlew <task> -PreactNativeArchitectures=x86_64
reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64

# Use this property to enable support to the new architecture.
# This will allow you to use TurboModules and the Fabric render in
# your application. You should enable this flag either if you want
# to write custom TurboModules/Fabric components OR use libraries that
# are providing them.
newArchEnabled=true

# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
hermesEnabled=true
# android/gradle.properties
org.gradle.daemon=true
org.gradle.parallel=true
org.gradle.configureondemand=true

运气好的话,终于守得云开

网络质量好,运气好的情况下,apk能正常安装到android设备上

但是设备上

所以需要先确保Metro正常运行

根据提示,运行

npx react-native start

看到这个图标,确保Metro正常运行


​android 设备的状态是

让Metro一直运行,新开terminal

运行

yarn android

如下

有戏

点击继续安装,搞定咯

因为Metro一直在运行,任何改动,都会实时显示,方便调试

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐