React Native 安卓环境搭建

最新推荐文章于 2024-08-01 13:45:06 发布
最新推荐文章于 2024-08-01 13:45:06 发布
阅读量1.1k 收藏 3
点赞数 2
分类专栏： 笔记 泛客户端开发 文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50983325/article/details/119867395
版权

基础环境

必须安装的依赖有：Node.js、Yarn 和 React Native 脚手架。这是运行 RN 的基础

Node.js

  • Node.js 的版本应大于等于 12，推荐安装 LTS 版本（去Node.js官网下载安装包）

  • 安装之后，（为了提高下载速度）我们将 npm 镜像源，设置为淘宝的

    #修改npm的镜像源
npm config set registry https://registry.npm.taobao.org

#验证是否更改成功（查看镜像源）：
npm config get registry

yarn

yarn 是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。使用之前先安装

npm install -g yarn

RN 脚手架

RN 脚手架会帮我们创建基础的目录结构，使用之前先安装

npm install -g react-native-cli

JDK

简介

JDK（Java Development Kit）是 Java 开发套件的简称。我们用 React Native 开发的 Android 应用，最终是运行在 Java 环境中的。所以，需要安装 JDK。

下载

JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本，注意 1.8 版本官方也直接称 8 版本）去官网下载（或者直接找老师要安装包）下载地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html请选择一个适合本地操作系统的安装包（操作系统+位数，例如：Windows x64）。下载时，提示需要登陆，我们可以先注册 Oracle 账户，登陆后再下载。

安装

下载完成后，双击安装包，开始安装（一直下一步就好，无需特殊配置）。安装过程中，会提示我们设置安装路径，这里我用默认的路径（安装到 C 盘）安装成功，点击 “关闭”

验证

安装完成后，重新打开命令行，输入 java -version，然后回车，验证安装是否成功（看到版本号，说明JDK 安装成功）。

如果看不到效果。需要将 JDK 的安装路径，绑定的环境变量中。然后，重新打开命令行验证。
在这里插入图片描述

Android Studio

Android Studio （简称 AS）是安卓开发的编辑器和运行环境。使用之前，先下载。

在安装 Android Studio 之前，请确保以下环境

  • 操作系统：Windows 7/8/10 (32-bit or 64-bit).
  • 内存：最小 4 GB，推荐 8 GB 或更高
  • 硬盘空间：最小2 GB，推荐 4 GB 或更高
  • JDK 版本：1.8（1.8 版本官方也直接称 8 版本）

如果你之前没有接触过 Android 的开发环境，那么请做好心理准备，这一过程相当繁琐。

结合自己的安装经历，把整个安装过程分成了 17 个步骤，下图是安装步骤的时间占比。
在这里插入图片描述
Step 1
下载 Android Studio
下载地址：https://developer.android.com/studio/index.html
如果无法打开官方链接，请翻墙下载。或直接找老师要安装包。
在这里插入图片描述

Step 2
下载完成后，双击安装包。Android Studio Setup 将显示在屏幕上，点击 Next 继续
在这里插入图片描述
Step 3
选择你需要安装的组件，需要安装 Android Studio 和 Android Virtual Device（安卓虚拟设备）。需要2.7GB 的空间。这里使用默认设置，点击 Next 继续。
在这里插入图片描述
Step 4
接下来会出现 Android Studio 的安装位置，这里我们使用默认位置，点击 Next 继续
在这里插入图片描述
Step 5
选择开始菜单文件夹，这里不做更改，点击 Install 继续
在这里插入图片描述
Step 6
接下来，我们会看到安装的进度条（可能会有点慢）。安装完成后，点击 Next 继续
在这里插入图片描述
在这里插入图片描述
Step 7
安装完成界面，点击 Finish，并启动 Android Studio（Start Android Studio）
在这里插入图片描述
Step 8
此时会出现 Android Studio 的欢迎页面
在这里插入图片描述

Step 9
欢迎页面之后，你会看到 Android 的启动导航页面。点击 Next 继续
在这里插入图片描述
Step 10
然后选择安装类型，对于初次安装的同学，此处建议使用默认的 Standard，标准安装（Standard）会为我们安装最常用的设置和选项。点击 Next 继续
在这里插入图片描述
Step 11
选择主题。这里有黑白两种，根据个人喜好选择即可。点击 Next 继续
在这里插入图片描述

Step 12
接下来，我们可以看到软件的位置。例如：SDK 和 JDK 的位置。另外，还可以看到需要下载的各个组件的大小。

例如：

  • Android Emulator 是 247 MB
  • Android SDK Tools 是 149 MB
  • Google APIs Intel x86 Atom System Image 是 1.15 GB）

总共需要下载 1.69 GB（Total Download Size），点击 Finish 会下载所有的 SDK 组件
在这里插入图片描述
在这里插入图片描述
Step 13
然后进入下载界面，这一下载过程，可能需要巨长巨长巨长的时间。主要有两个原因

  • 首先，这里下载的内容很大（大约 1.69 GB）
  • 另外，这一下载过程需要翻墙（需要 Google 的下载地址）

该下载过程要保证翻墙软件稳定，否则，可能会失败（下载中断）。

如果下载中断，需要多次重启 Android Studio，重复这一下载过程。直到安装完成
在这里插入图片描述
Step 14
安装完成后，我们就会见到 Android Studio 的欢迎界面。点击 Create New Project 创建新项目。
这里创建项目的目的有两个：

  • . 确保项目的运行环境
    • 可以在项目（编辑器菜单）中，安装模拟器软件
    • 可以在项目（编辑器菜单）中，安装 Android SDK
  • 启动模拟器，查看 RN 的运行效果
    在这里插入图片描述
    Step 15
    接下来，会弹出选择项目模板的界面，我们可以根据自己的需要，选择一个项目模板。这里用默认选中的模板。点击 Next 继续。
    在这里插入图片描述

Step 16
接下来，是配置项目界面。我们可以设置项目名称，项目存储位置以及项目编程语言（Java orKotlin）。这里我把项目名称重命名为 rndemo。点击 Finish 继续
注意：项目名称不要用中文，也不要包含特殊字符
在这里插入图片描述
Step 17
进入 Android Studio 界面，初次创建项目，可能需要等待几分钟
在这里插入图片描述

Android SDK

Android SDK 是针对安卓开发的套件。

为什么

虽然 Android Studio 默认会安装最新版本的 Android SDK。但是，目前编译 React Native 应用需要的是Android10(Q)版本的 SDK。所以，这里还需要再次安装一下 React Native 需要的 SDK。

怎么做

打开 Android Studio，在菜单 Tools 下找到 “SDK Manager”
在这里插入图片描述
在 SDK Manager 中选择"SDK Platforms"选项卡，然后，在右下角勾选"Show Package Details"。展开Android10(Q)选项，确保勾选了下面这些组件（重申：你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：

  • Android SDK Platform29
  • Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）
    在这里插入图片描述

然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的29.0.2版本。
在这里插入图片描述
总共有两个内容，组件大小约：113.0 MB，安装后占用空间约：451.9 MB
在这里插入图片描述

点击 OK 执行下载（这个下载时间也比较长，同时确保翻墙工具稳定可用）
在这里插入图片描述

如果下载过程中断，请重复选中以上两个组件，再次下载

例如，我本地下载中断，报错：SSL peer shut down incorrectly（网络中断报错）
只需要重复选中所需组件，再次下载即可。

下载完成后，点击 Finish
在这里插入图片描述

绑定环境变量

为什么
RN 运行时，需要执行 Android SDK 下的命令，将 Android SDK 相关路径配置到环境变量中，从而保证RN 能够正常地编译运行。

怎么做
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录：

鼠标放到此电脑上，右键查看属性，然后点击高级系统设置，然后点击高级下的环境变量
在这里插入图片描述

然后在系统变量下，选择新建，最后将你本地的 SDK 路径设置为 ANDROID_HOME 变量。

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

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

你可以在 Android Studio 的Tools → SDK Manager菜单中查看 SDK 的真实路径，具体是Appearance & Behavior→System Settings→Android SDK。
在这里插入图片描述
添加完ANDROID_HOME后。还可以把一些常用工具目录添加到环境变量 Path 中。

选中Path变量，然后点击编辑。点击新建然后把这些工具目录路径添加进去：platform-tools、emulator、tools、tools/bin

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

例如：adb。未添加以下环境变量之前，命令行中无法运行 adb 命令。其执行路径在：

%ANDROID_HOME%\platform-tools\adb.exe，配置环境变量后，就可以在命令行执行 adb命令了。
在这里插入图片描述

配置完成后，记得点击确定

模拟器

模拟器是在电脑上模拟出来的手机界面，我们可以在模拟器中，查看 App 的执行效果。

相当于 Web 开发中的浏览器。在使用之前需要先安装。

安装
打开 Android Studio。如果菜单中显示没有设备（No Devices），可以通过 AVD Manager 添加设备（模拟器）

如果菜单中已经安装了模拟器，你可以跳过本小节。直接去创建项目
在这里插入图片描述

在弹出窗口中，点击 Create Virtual Device，添加虚拟设备
在这里插入图片描述

在弹出窗口中，我们可以选择多个模拟器，这里我们安装默认的，直接点击 Next 继续
在这里插入图片描述
在下面的窗口中，我们点选默认的 Download
在这里插入图片描述
在弹出窗口，默认选中 Decline （拒绝）
在这里插入图片描述
此时，我们选择 Accept（接收），然后 Next 高亮了，我们点击 Next 继续
在这里插入图片描述

然后进入下载页面，这里下载的组件，大约有 1.1GB，所以，下载时间可能有点长（而且需要翻墙）
在这里插入图片描述
下载完成，点击 Finish 继续
在这里插入图片描述
此时，对应的 Next 按钮高亮显示了，我们点击 Next 继续
在这里插入图片描述
接下来，我们会看到模拟器的信息，点击 Finish 继续
在这里插入图片描述
此时，我们安装的模拟器，就会出现在列表中。点击右上角的 X，关掉窗口即可。

当然，你可以继续安装其他的模拟器（右下角 + Create Virtual Device…），我们这里安装一款就 OK 了

在这里插入图片描述
然后，我们在 Android Studio 的菜单中，就能看到刚才安装的模拟器了。
在这里插入图片描述

启动
在 Android Studio 中有三种方式启动模拟器

  • 点击菜单Run -> Run ‘app’
  • 点击绿色的小三角
  • 快捷键 Shift+F10
    在这里插入图片描述
    启动之后的效果。模拟器（手机框）可以任意拖动。安卓工程师一般会在 Android Studio 中编写代码，然后在模拟器中看效果。我们在学习 React Native 编程过程中，只需要借助 AndroidStudio 的安卓运行环境和模拟器。我们不需要在 Android Studio 中写代码。
    在这里插入图片描述

验证
在命令行中，输入 adb devices , 查看当前开启的模拟器地址。如果看不到模拟器，说明模拟器未启动
在这里插入图片描述

注意：未绑定环境变量之前，在命令行执行 adb 会报：”adb“ 不是内部或外部命令所以， 执行 adb devices
之前，请确保绑定了环境变量。

创建项目

通过创建 React Native 项目和运行项目，可以验证我们之前安装的环境是否正常可用。

初始化项目
打开命令行，初始化项目（项目的存储位置可以自己设定，例如：我本地是 D:\rn）

#初始化项目（确保已经安装了react-native-cli）
react-nativeinitrndemo

初始化完成后，我们可以通过 vscode ，打开项目目录，熟悉一下里面的目录结构
在这里插入图片描述
ndex.js 是 RN 项目的入口文件, 此文件会加载 App.js

ios 目录，是 RN 编译 iOS 应用的目录

android 目录，是 RN 编译安卓应用的目录

运行项目
首先在命令行中，进入项目，然后运行

#进入项目
cd rndemo
#运行项目
yarn android #运行到android
#或者
yarn react-nativerun-android

第一次运行时，需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的翻墙工具，否则将频繁遭遇链接超时和断开，导致无法运行。
在这里插入图片描述

建议在run-android成功后，再尝试使用 Android Studio 启动。

请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。

启动异常处理：

在这里插入图片描述
如果见到上图报错：Unable to load script. Make sure …
解决方案：

  1. 创建 assets 目录

    mkdirandroid/app/src/main/assets

    注意：dos 中的分隔符是 , Mac 和 Linux 下的分隔符是 /

  2. 执行打包命令
    将下面的命令，添加到 package.json 的 scripts 中

    "android-bundle":"react-nativebundle--platformandroid--devfalse--entry-fileindex.js--bundle-outputandroid/app/src/main/assets/index.android.bundle--assets-destandroid/app/src/main/res&&react-nativerun-android"

  3. 然后在命令行中运行

    yarn android-bundle

我们可以看到 RN 的编译窗口
在这里插入图片描述
项目编译成功后，我们就可以看到模拟器了，此时，模拟器中显示的内容，就是初始化生成的 RN 项目
在这里插入图片描述
除了在模拟器上看项目运行的效果，我们还可以通过手机查看 RN 项目的效果，即真机调试

如果要真机调试，必须开启 Android 手机的开发者模式，需要用 usb 数据线连接到电脑。

真机调试细节参考：在设备上运行这篇文档。

christian-dong
关注
专栏目录
Android之Windows下搭建React Native Android开发环境（差不多搞了一天）
码莎拉蒂
10-27 2万+
最新情报 0.12已经发布。很多原本需要手动修改BUG的部分很多已经不再需要。 安装JDK 从Java官网下载JDK并安装。请注意选择x86还是x64版本。 推荐将JDK的bin目录加入系统PATH环境变量。 安装Android SDK 可以单独安装Android SDK，也可以通过Eclipse ADT或者Android Studio一并安装。推荐使用Andr
React Native开发环境搭建-安卓
weixin_39285322的博客
07-07 419
2、安装Android SDK，Android Studio 默认会安装最新版本的 Android SDK。2、安装JDK，React Native 需要 Java Development Kit [JDK] 11，你可以在命令行中输入 javac -version（请注意是 javac，不是 java）来查看你当前安装的 JDK 版本。5、下载完后配置 ANDROID_HOME 环境变量，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录；
React Native Android（一）环境搭建
扬州慢的android博客
10-29 1520
因为工作需要，最近正在学习React Native Android。温故而知新，把学习的内容记录下来巩固一下知识，也给有需要的人一些帮助。对程序员来说，入门的第一课毫无疑问就是搭建环境。
RN 开发环境搭建（Windows For Android）
最新发布
monkeyfly学前端
08-01 1260
RN 开发环境搭建教程（Windows For Android）
React Native 环境配置 (保姆式教程) 2024版Android Studio
qq_45273808的博客
05-14 842
这个gradle-8.0-all.zip 可以根据自己的JDK版本来下载。官方文档要求了必须要有这三个依赖，关于Android Studio如果不想用它提供的模拟器 可以只单独下载它的SDK即可。在运行这个之前，记得先把模拟器打开 我这边是用的Android Studio 自带的模拟器。安装路径可以自己修改，尽量不要放在C盘，如果你内存多，当我没说。ANDROID_HOME= 这个是安装SDK时候的路径。JAVA_HOME = 这个是按照JDK的路径。都勾选好，然后点Apply去下载就好了。
React Native 环境搭建----Andriod端
m0_47745235的博客
10-23 3379
详细！！！React Native 环境搭建----Andriod端（window11系统）
React-native初体验（安卓篇）
大转转FE
06-30 271
本篇文章主要包括两方面，如何从0开始把RN（react-native）项目整合进入现有Android项目，以及我们做的第一个RN的上线项目遇到的一些坑。初次做RN项目，我...
react native windows 环境搭建
06-07
### React Native for Windows 开发环境搭建指南 #### 一、概述 React Native 是 Facebook 推出的一款用于构建原生移动应用的框架，它允许开发者使用 JavaScript 和 React 构建 iOS 和 Android 应用。本文档将详细...
React Native 环境搭建的教程
08-29
在本篇文章中，我们详细介绍了 React Native 环境搭建的教程，包括环境搭建、创建应用、package.json 文件、iOS 和 Android 目录、初次运行和启动过程。希望这篇文章能够对大家的学习有所帮助。
React Native开发环境搭建详细步骤
Asafoetida的博客
03-21 7970
安装依赖​ 必须安装的依赖有：Node、JDK 和 Android Studio。
React Native开发环境搭建，VS Code运行项目步骤详解
Zh.快乐的程序猿的博客
03-23 2060
React Native开发环境搭建，VS Code运行项目步骤详解
一个基于 React Native 的 Android 企业级应用项目源码
08-07
RNPolymerPo 是一个基于 React Native 的生活类聚合实战项目，目前由于没有 MAC 设备，所以没有适配 iOS，感兴趣的可以自行适配 app 目录下相关 JS 代码即可。 获取代码与编译调试打包 如下所有步骤及说明均为 React Native Android 的 DIY，涉及命令均为 Ubuntu 环境，Windows 类推即可。 1. 获取代码及模块安装和签名配置 执行如下命令进行代码下载及模块安装： $ git clone https://github.com/yanbober/RNPolymerPo.git $ cd RNPolymerPo $ npm install //如果觉得慢可以先切换到国内 npm 镜像源再执行此命令 配置 Gradle 个人签名路径及属性： //1. 把你个人的签名 my-release-key.keystore 文件（不知道如何生成请自行搜索）放到 RNPolymerPo 工程的 android/app 文件夹下。 //2. 编辑工程的 gradle.properties 文件，添加如下的代码（注意把其中的****替换为你自己相应密码）。 MYAPP_RELEASE_STORE_FILE=my-release-key.keystore MYAPP_RELEASE_KEY_ALIAS=my-key-alias MYAPP_RELEASE_STORE_PASSWORD=***** MYAPP_RELEASE_KEY_PASSWORD=***** 2. 编译打包 APK 文件 编译生成在线快速调试 Debug 开发包，执行如下命令： $ adb reverse tcp:8081 tcp:8081 $ react-native start //开启本地 JS 服务 $ react-native run-android //新终端的 RNPolymerPo 目录下执行 编译生成 release 包，执行如下命令： $ cd android && ./gradlew assembleRelease 拓展规划 下一个版本准备做的事情： 兼容性处理； 夜间模式； 热修复及 PHP 服务端编写； 多语言切换等问题评估；
React Native安卓环境搭建（以官网教程为基础进行改进）
mengxianglong123的博客
01-22 3914
本文以官网的教程为基础，进行了一定程度的详细描述，并以Android Studio作为重点进行描述，由于安装环境的具体操作变化很快，故本文也仅供参考，文中所涉及的组件及软件版本为ReactNative-v0.67，Android Studio-2020.3.1，阅读时请注意版本对应 必须安装的依赖有：Node、JDK 和 Android Studio。 虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环.
React Native Android 应用层实战沦陷记
工匠若水
12-13 9628
一眨眼又一年快要过去了，原计划今年的最后一个小目标（React Native）看样子要留尾巴到明年了，React Native 想说爱你不容易。怎么评价你呢？应用层 JSX 编写还是很友好的，尼玛框架接入的各种锅却让人痛哭不已，万事开头难，对于 React Native 的接入可以说大量工作可能都需要投入到框架接入中（各种灰度实验的兼容性、各种锅），一旦接入稳定以后真的就是尝到甜头了。
react native android
jiyuan18的博客
05-23 478
貌似windowns和Linux下react native android是社区来维护的，暂时看上去不太靠谱，所以用mac先试一试。 按照官方文档来。（http://sentsin.com/web/1120.html 翻译过的也可以参考下。） 1.安装android环境和genymotion模拟器 https://facebook.github.io/react-native/docs/an
React-Native的Android环境搭建
aa671125的专栏
02-24 474
React-Native的Android环境搭建前言假如你是一位IOS开发者,那么配置这个开发环境你可以不用看了,因为这个是给Android开发者看的,因为IOS太简单啦,根本不需要什么教程.但是对于Android开发者来说,还是需要做一些工作的.废话不多说,我们开始吧.(最好确保你的电脑能翻墙,请使用科学上网.)1.检查请检查你的电脑以下环境变量配置没有: jdk的环境变量(java版本jdk8)
React Native For Android
cq_async的博客
07-04 1404
Gradle DSL method not found: 'url()' Possible causes:The project '***' may be using a version of the Android Gradle plug-in that does not contain the method (e.g. 'testCompile' was added in 1.1.0). <a
安卓React Native开发--踩坑大全
栀夏暖阳的博客
02-09 530
版权声明：本文为Marno原创，转载必须在明确位置注明出处！ 转载地址：http://www.jianshu.com/p/276cb2c0283a 注：原创不易，欢迎【赞赏】和【点赞】 更多关于安卓React Native知识请关注简书专题《安卓React-Native阵营》 使用中文指导中的命令行安装【Chocolatey】失败，无法使用【ch
React Native环境搭建——Android
qq_58151324的博客
07-05 1091
React Native环境搭建——Android
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值