VMware+Ubuntu搭建react native开发环境
一. 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 -------敲重点
官网给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一直在运行,任何改动,都会实时显示,方便调试

更多推荐

所有评论(0)