新手教程-使用 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 设备上运行
相关推荐
SunTecTec18 分钟前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
拉不动的猪1 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程2 小时前
ES练习册
java·前端·elasticsearch
Asthenia04122 小时前
Netty编解码器详解与实战
前端
袁煦丞2 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛3 小时前
vue组件间通信
前端·javascript·vue.js
一笑code3 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员3 小时前
layui时间范围
前端·javascript·layui
NoneCoder3 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19704 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端