记录成就美好回忆。

当前 React-native 版本: [0.71]

入门环境搭建

参考文档(官译中文版)

搭建开发环境 · React Native 中文网

按照文档流程下来,安装基础环境**[windows]**

node

node 版本要求14 以上,以及安装**npx;**安装完后建议设置淘宝源。

JDK

Android

安装 Android Studio https://developer.android.google.cn/studio/

SDK Manager

安装完成后打开 Android Studio 找到 SDK Manager:

  • 可以在 Android Studio 的欢迎界面中找到 SDK Manager。
    点击"Configure",然后就能看到"SDK Manager"。
  • 还可以在 Android Studio 的"Preferences"菜单中找到。
    具体路径是Appearance & Behavior
    System Settings
    Android SDK

"SDK Platforms"选项卡

右下角勾选"Show Package Details”可查看更多选项

主要 Android SDK Platform 33 版本以及模拟器

  • Android SDK Platform 33
  • Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

"SDK Tools"选项卡

右下角勾选"Show Package Details”可查看更多选项

  • 对应33.0.0版本(可以同时安装多个其他版本

最后点击 “Apply”下载和安装

ANDROID_HOME 环境变量

创建一个名为ANDROID_HOME 的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录。

SDK 默认是安装在下面的目录:

C:\Users\你的用户名\AppData\Local\Android\Sdk

你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior
System Settings
Android SDK

Path 环境变量

在 Path 环境变量中添加四个 android 相关变量:

%ANDROID_HOME%\platform-tools

%ANDROID_HOME%\emulator

%ANDROID_HOME%\tools

%ANDROID_HOME%\tools\bin

至此,基础环境配置好了,以上一切顺利。

是的,假如有工具的前提下,到目前为止,已经成功了**90%**了 👏。

可是,假如没有工具的情况下,才刚刚开始!!! 🤏的

创建项目

移除旧版 react-native-cli

温馨提示:之前安装过旧的 react-native-cli 的需要先移除掉以避免冲突(刚接触,也不知道怎么才算旧,反正有没有印象都跑一次就好了),移除命令:

npm uninstall -g react-native-cli @react-native-community/cli

创建新项目

npx react-native init nTSProject

使用--template 使用社区提供的模板

npx react-native init nTSProject --template react-native-template-typescript

在 React Native 0.71 版本 TypeScript 已经是默认的了,上面这个命令 --template 选项会报一个 warn 无伤大雅。

配置了淘宝源 或者使用了工具,这里还一切都好。

项目创建成功可以看到:

react native项目使用Android studio打包apk react native android studio_Android

创建失败就检查网络或者npm源

What’s Next ?

进入项目目录,并跑起来:

cd nTSProject 
npx react-native run-android

正常情况下弹出两个窗口 Metro 运行的和安卓模拟器的和一个安卓模拟器

react native项目使用Android studio打包apk react native android studio_android_02

安卓模拟器

如果是首次安装 Android Studio ,执行时候可能会报找不到模拟器。我们打开 Android Studio 找到 Virtual Device Manager

react native项目使用Android studio打包apk react native android studio_javascript_03

点击 ⇒ “Create device” 创建一个设备:

react native项目使用Android studio打包apk react native android studio_javascript_04

创建成功后 Device列表中会出现刚才创建的设备,然后关掉就行。

然后重新执行 npx react-native run-android 即可。


以上,假如有工具,只需稍候片刻,就可看见app已经在模拟器上运行起来了。可喜可贺。

没有的情况下,还要折腾很多。

以下为国内环境下依赖下载相关问题:

gradle下载失败

react native项目使用Android studio打包apk react native android studio_前端_05

解决方法

自行下载 https://gradle.org/releases/ 找到对应的版本(这里是gradle-7.5.1-all)

react native项目使用Android studio打包apk react native android studio_react native_06

下载完成后修改 nTSProject/android/gralde/wrapper/gradle-wrapper.properties 文件里面的distributionUrl 成你下载后放置的地方:

react native项目使用Android studio打包apk react native android studio_前端_07

  • 简单说明一下 gradle-wrapper.properties 这个文件
    distributionBase + distributionPath = 下载gradle后存放的位置
    zipStoreBase + zipStorePath = 解压gradle后存放的位置
    distributionUrl = 要下载gradle的位置

再次执行 npx react-native run-android

可以看到gradle下载的过程搞定了。

react native项目使用Android studio打包apk react native android studio_react native_08

好的,下一个问题又来了。

react-native-gradle-plugin

好的,现在应该就是卡在这个地方了。

react native项目使用Android studio打包apk react native android studio_android_09

这里需要替换一下资源地址:

打开项目里面的android文件,找到 build.gradle 文件

react native项目使用Android studio打包apk react native android studio_javascript_10

经过漫长的下载:

react native项目使用Android studio打包apk react native android studio_react native_11

还没下完 😴

CONFIGURING 终于完成了。

接下来是 EXECUTING …

react native项目使用Android studio打包apk react native android studio_前端_12

终于跑起来了,泪目~~

react native项目使用Android studio打包apk react native android studio_Android_13