windows11下搭建react native 安卓运行环境
win11下搭建react native安卓运行环境
·
windows环境说明
- 开启虚拟化
- 安装wsa软件(中文名适用于Android的windows子系统设置)
建议必应搜索去下载离线安装包,应用商店不好用
react native 安装
-
安装nodejs版本 推荐12版本以上
-
安装java版本 推荐 11以上
-
安装react-native (npm直接下载即可)
-
安装android studio
这里要在系统环境变量中sdk路径
adb工具安装
- 下载adb工具包
- 配置系统环境变量类似如下
adb常见命令
- adb devices 查看设备列表
- adb connect ip:端口号 连接指定的调试环境
创建react native模板项目
- 在自定义目录下运行 react-native init 项目名称 --template typescript
我这里是创建ts服务
- 目录结构如下
- 切换至template目录下 执行npm install 或者 yarn install 来安装第三方依赖
android文件夹下创建local.properties文件
内容里填写上边说到的sdk的路径
离线下载 gradle-x.x.x-all.zip 文件
- 更改android/gradle/wrapper 下的gradle-wrapper.properties 文件
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=file:///D:/code/react/myapp/good/template/android/gradle-7.3.3-all.zip 这个改为离线的 原先的https的下载经常会超时
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
更改 build.gradle文件下的 maven仓库
import org.apache.tools.ant.taskdefs.condition.Os
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
ext {
buildToolsVersion = "31.0.0"
minSdkVersion = 21
compileSdkVersion = 31
targetSdkVersion = 31
if (System.properties['os.arch'] == "aarch64") {
// For M1 Users we need to use the NDK 24 which added support for aarch64
ndkVersion = "24.0.8215888"
} else {
// Otherwise we default to the side-by-side NDK version from AGP.
ndkVersion = "21.4.7075529"
}
}
repositories {
google()
mavenCentral()
}
dependencies {
classpath("com.android.tools.build:gradle:7.0.4")
classpath("com.facebook.react:react-native-gradle-plugin")
classpath("de.undercouch:gradle-download-task:4.1.2")
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$rootDir/../node_modules/react-native/android")
}
maven {
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
}
mavenCentral {
// We don't want to fetch react-native from Maven Central as there are
// older versions over there.
content {
excludeGroup "com.facebook.react"
}
maven { url "https://maven.aliyun.com/repository/google" }
maven { url "https://maven.aliyun.com/repository/public" }
maven { url "https://maven.aliyun.com/repository/central"}
}
google()
maven { url "https://maven.aliyun.com/repository/google" }
maven { url "https://maven.aliyun.com/repository/public" }
maven { url "https://maven.aliyun.com/repository/central"}
}
}
运行
- 命令行输入 adb connect localhost:58526
- 连接是否成功显示输入 adb devices
如果是真机可以忽略上述两步
- 切换至项目的template下 命令行执行 npx react-native run-android
- 运行效果如下
更多推荐
所有评论(0)