React Native 之 开发环境搭建(一)

1. 安装Node.js:

Node.js是React Native开发的基础,因此首先需要安装Node.js。强烈建议始终选择 Node 当前的 LTS (长期维护)版本,一般是偶数版本,不要选择偏实验性质的奇数版本。
如果你希望更方便地管理Node.js版本,可以考虑使用Node Version Manager(NVM)。NVM可以帮助你轻松地在不同版本的Node.js之间切换。

2. 安装Yarn:

Yarn是Facebook提供的一个替代npm的包管理工具,它可以加速node模块的下载。你可以在命令行中输入npm install -g yarn来全局安装Yarn。

3. 安装Java Development Kit (JDK):

React Native需要JDK来支持Android开发。你可以从Oracle官网下载JDK 17或更高版本。下载后,需要配置JAVA_HOME环境变量,并将其添加到系统的PATH环境变量中。

4. 安装Android Studio:

Android Studio是Android开发的官方集成开发环境(IDE)。

1.首先下载和安装 Android Studio,国内用户可能无法打开官方链接,请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项,确保选中了以下几项:
Android SDK
Android SDK Platform
Android Virtual Device
2.然后点击"Next"来安装选中的组件。
可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。
如果选择框是灰的,你也可以先跳过,稍后再来安装这些组件。
在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 13 (Tiramisu)选项,确保勾选了下面这些组件(如果你看不到这个界面,则需要使用稳定的代理软件):
Android SDK Platform 33
Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)
然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的33.0.0版本。你可以同时安装多个其他版本。
最后点击"Apply"来下载和安装这些组件。
3.配置 ANDROID_HOME 环境变量
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录。
4.把一些工具目录添加到环境变量 Path。
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。点击新建然后把这些工具目录路径添加进去:platform-tools、emulator、tools、tools/bin

5. 配置Android开发环境:

安装完Android Studio后,你需要配置Android开发环境。这包括创建AVD(Android Virtual Device,即Android虚拟机)以模拟Android设备,以及配置必要的Android SDK和构建工具。

Android 官方提供了名为 Android Virtual Device(简称 AVD)的模拟器。般来说官方模拟器免费、功能完整,但性能较差。第三方提供的模拟器如Genymotion、BlueStack 等。第三方模拟器性能较好,但可能需要付费,或带有广告。

使用 Android 模拟器
你可以使用 Android Studio 打开项目下的"android"目录,然后可以使用"AVD Manager"来查看可用的虚拟设备,它的图标看起来像下面这样:在这里插入图片描述
如果你刚刚才安装 Android Studio,那么可能需要先创建一个虚拟设备。点击"Create Virtual Device…“,然后选择所需的设备类型并点击"Next”,然后选择Tiramisu API Level 33 image.
注意:请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议,否则可能导致无法运行。

6. 安装React Native CLI:6

React Native CLI是一个命令行工具,用于创建和管理React Native项目。你可以通过npm全局安装它:npm install -g react-native-cli。

如果你之前全局安装过旧的react-native-cli命令行工具,请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突:

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

7. 验证环境配置:

最后,你可以通过创建一个新的React Native项目来验证你的环境配置是否正确。在命令行中输入react-native init MyAwesomeProject来创建一个名为MyAwesomeProject的新项目。如果项目成功创建并且没有出现错误,那么你的环境配置就是正确的。

相关推荐

  1. React开发环境教程

    2024-05-14 17:20:09       10 阅读
  2. React环境

    2024-05-14 17:20:09       19 阅读
  3. mac前端开发环境步步指引你的编程

    2024-05-14 17:20:09       8 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-05-14 17:20:09       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-05-14 17:20:09       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-05-14 17:20:09       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-05-14 17:20:09       18 阅读

热门阅读

  1. [Python]锁

    2024-05-14 17:20:09       11 阅读
  2. spring boot 线程池的应用

    2024-05-14 17:20:09       14 阅读
  3. 基因专利的得与失

    2024-05-14 17:20:09       9 阅读
  4. Edge的使用心得与深度探索

    2024-05-14 17:20:09       13 阅读
  5. 下拉多选【bootstrap-multiselect】

    2024-05-14 17:20:09       11 阅读
  6. k8s相关常用语句

    2024-05-14 17:20:09       13 阅读
  7. oraclesql中删除表中重复行的方法

    2024-05-14 17:20:09       18 阅读
  8. 遥感中常用的降维方法-UMAP介绍

    2024-05-14 17:20:09       16 阅读
  9. SpringBoot + Druid + Sqlite 文件数据库初体验

    2024-05-14 17:20:09       14 阅读