新手教程-使用 Android Studio 搭建 React Native 项目开发环境

新手使用 Android Studio 开发 React Native 项目教程

配置Java环境 React Native 项目需要 Java 环境来构建 Android 项目。建议可以跟同事保持一致版本如果是老项目的话

  1. 使用 Homebrew 安装 Java

打开终端,使用 Homebrew 安装 Java :

css 复制代码
brew install openjdk@xx
  1. 配置 Java 环境变量

安装完 Java 后,你需要设置 Java 环境变量:

  1. 打开 ~/.zshrc 文件进行编辑:
bash 复制代码
nano ~/.zshrc
  1. 在文件中添加以下内容:
bash 复制代码
export JAVA_HOME=$(/usr/libexec/java_home -v 17)
export PATH=
$JAVA_HOME/bin:$
PATH
  1. 保存并退出编辑器,然后使更改生效:
bash 复制代码
source ~/.zshrc
  1. 验证 Java 安装

使用以下命令验证 Java 版本:

复制代码
   java -version

如果安装正确,你应该看到 Java 17 的版本信息。

安装 Android Studio 和 模拟器

Android Studio 官网 下载并安装 Android Studio。

安装步骤:

  1. 下载并安装 Android Studio。
  2. 在首次启动时,Android Studio 会提示你安装一些必要的组件(如 Android SDK、Android 虚拟设备等)。
  3. 完成安装后,打开 Android Studio 并配置默认 Android SDK 路径。

安装 Android 模拟器

Android Studio 自带了 AVD(Android Virtual Device)管理工具,允许你创建并运行虚拟 Android 设备。请按照以下步骤创建并启动模拟器:

  1. 在 Android Studio 中,点击工具栏的 AVD Manager(Android Virtual Device 管理器)。
  2. 点击 Create Virtual Device 创建新的虚拟设备。
  3. 选择设备型号、系统镜像等选项,创建模拟器。
  4. 启动模拟器,确保其正常工作。

安装SDK 和 Tools

如果你希望手动安装 SDK 或工具,可以按以下步骤操作。

  1. 安装 Android SDK

在 Android Studio 中,默认情况下 SDK 会随 Android Studio 一起安装。如果你需要手动安装或更新 SDK,请按照以下步骤操作:

  1. 打开 Android Studio。

  2. 路径 Settings | Languages & Frameworks | Android SDK,见图。

  3. 在 SDK 管理器中,选择并安装所需的 SDK 版本和工具(如 SDK Platform 和 Android Build Tools)。

  1. 安装 SDK Command Line Tools

    1. 同上一步可以在 Settings | Languages & Frameworks | Android SDK中进行勾选安装
    2. (也可以手动到官网安装放置到本地sdk目录下)
    3. 访问 SDK Downloads 页面
    4. 下载适用于 macOS 的 Command Line Tools。
    5. 将下载的工具解压并放置到 Android SDK 目录下。

配置环境变量

  1. 设置 ANDROID_HOME 环境变量

    1. 确保 Android SDK 已正确安装并配置了 ANDROID_HOME 环境变量。此步骤确保你的开发工具能够找到 Android SDK。

    2. 步骤:

    3. 找到 Android SDK 的安装路径并切入。通常,如果你通过 Android Studio 安装 SDK,默认路径为:

      1. macOS : /Users/<your-username>/Library/Android/sdk
    4. 设置 ANDROID_HOME 环境变量。在终端中,编辑 ~/.zshrc 文件(如果使用的是 Zsh),或者编辑 ~/.bash_profile(如果使用的是 Bash)。

      1. 使用以下命令打开 ~/.zshrc 文件:
      bash 复制代码
       nano ~/.zshrc
      1. 在文件末尾添加以下内容(请替换 <your-username> 为你的用户名):
      bash 复制代码
       export PATH="/opt/homebrew/opt/openjdk@17/bin:$PATH"
       export ANDROID_HOME=/Users/<your-username>/Library/Android/sdk
       export PATH=
       $ANDROID_HOME/tools:$
       ANDROID_HOME/platform-tools:$PATH
       export PATH=$ANDROID_HOME/cmdline-tools/latest/bin:$PATH
      1. 保存并退出编辑器后,使修改生效:
      bash 复制代码
       source ~/.zshrc
  2. 配置 sdk.dirlocal.properties 文件中

    1. 在你的 React Native 项目的 android 目录下,编辑或创建 local.properties 文件,确保其包含正确的 SDK 路径。

    2. 步骤:

    3. android 目录中找到 local.properties 文件(如果文件不存在,可以手动创建)。

    4. 打开并编辑 local.properties 文件:

    bash 复制代码
     nano android/local.properties
    1. 在文件中添加以下行:

      javascript 复制代码
       sdk.dir=/Users/<your-username>/Library/Android/sdk
      1. 确保替换 <your-username> 为你的用户名。
  3. 验证 Android SDK 是否正确安装

    1. 使用以下命令验证 Android SDK 是否已正确安装:
    css 复制代码
     android-sdk --version
    1. 如果 SDK 安装正常,你应该会看到版本信息。

完成环境配置后运行项目

  • 你可以重新运行项目:
arduino 复制代码
pnpm run android
  • 如果一切设置正确,你应该能看到项目在 Android 模拟器或连接的 Android 设备上运行
相关推荐
开开心心就好4 小时前
批量提取PDF中的图片,直接导出原图
前端·javascript·支持向量机·智能手机·pdf·html·启发式算法
Setsuna_F_Seiei6 小时前
前端转型 Agent 开发 05 之 Agent Hooks 与 Checkpointer(让 Agent 从全自动转变人为可掌控)
前端·agent·ai编程
百万蹄蹄向前冲8 小时前
风扇转了一晚上MVP专家团翻车事故
前端·人工智能
默_笙8 小时前
🏛 给 AI 配一间办公室:Harness Engineering 六大模块与它的实现
前端·javascript
linux_cfan10 小时前
videojs v10 源代码系列解读:14 · 谓词守卫:在运行时安全地调用能力
前端·javascript·音视频
kyriewen10 小时前
我扒了 10,221 条 JD:腾讯技术岗 75% 在要 AI
前端·人工智能·ai编程
郑州光合科技余经理11 小时前
同城外卖小程序开发:下单成功后,后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程
IT_陈寒12 小时前
Vue的响应式让我熬到凌晨三点,原来漏了这个小细节
前端·人工智能·后端
Blanche150012 小时前
利用 RAG 为答疑机器人扩展知识范围
前端
天若有情67312 小时前
【纯前端小工具】公历生日转农历,批量查询每年农历生日对应的公历日期(GitHub Pages在线直接用)
前端·javascript·github pages·农历转换·lunisolar·网页小工具