新手教程-使用 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 设备上运行
相关推荐
CrissChan34 分钟前
Pycharm 函数注释
java·前端·pycharm
小小小小宇1 小时前
Vue.nextTick()笔记
前端
小约翰仓鼠3 小时前
vue3子组件获取并修改父组件的值
前端·javascript·vue.js
Lin Hsüeh-ch'in3 小时前
Vue 学习路线图(从零到实战)
前端·vue.js·学习
烛阴3 小时前
bignumber.js深度解析:驾驭任意精度计算的终极武器
前端·javascript·后端
计蒙不吃鱼3 小时前
一篇文章实现Android图片拼接并保存至相册
android·java·前端
全职计算机毕业设计3 小时前
基于Java Web的校园失物招领平台设计与实现
java·开发语言·前端
啊~哈4 小时前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
小小小小宇4 小时前
前端小tips
前端