likes
comments
collection
share

RN 学习小记之使用 Expo 创建项目

作者站长头像
站长
· 阅读数 14

由于业务需要，开始学习RN以备后面的需求，而虽然之前有用过 RN 但是项目搭建等都是封装好的脚手架，对本身其实了解不算太多，于是打算记录一下个人从头搭建 RN 项目的一个过程。顺带进行一个资料收集。

适合：有前端基础，有前端基本开发环境，想了解一下 Expo 搭建 RN 项目过程的人群

RN 相关资料

开发环境

win 下搭建安卓开发环境

安卓上，要注意的就是安装 Android Studio & Android SDK，Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是 Android 13 (Tiramisu) 版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android 5 以上设备）。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

1. 安装 Android Studio

Download and install Android Studio 下载并安装 Android Studio。在 Android Studio 安装向导中，确保选中以下所有项目旁边的框：

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device
  • 如果您尚未使用 Hyper-V： Performance (Intel ® HAXM) （有关 AMD 或 Hyper-V，请 参见此处）

2. 安装安卓 SDK

Android Studio 默认安装最新的 Android SDK。 使用本机代码构建 React Native 应用程序尤其需要 Android 13 (Tiramisu) SDK。可以通过 Android Studio 中的 SDK 管理器安装其他 Android SDK。

  1. 打开 Android Studio，单击“More Actions”按钮并选择“SDK Manager”。
  2. 从SDK Manager中选择“SDK Platforms”选项卡，然后勾选右下角“Show Package Details”旁边的框。查找并展开  Android 13 (Tiramisu)  条目，然后确保选中以下项目：
  • Android SDK Platform 33
  • Intel x86 Atom_64 System Image  或者  Google APIs Intel x86 Atom System Image

RN 学习小记之使用 Expo 创建项目 3. 接下来，选择“SDK Tools”选项卡并选中“Show Package Details”旁边的复选框。查找并展开 Android SDK Build-Tools 条目，然后确保选择了 33.0.0 （ps: 现在是 34.0.0了）

  1. 配置 ANDROID_HOME 环境变量 高级系统设置 - 环境变量 - 单击 New... 创建一个新的 ANDROID_HOME 用户变量，指向您的 Android SDK 的路径：

RN 学习小记之使用 Expo 创建项目

默认情况下，SDK 安装在以下位置：

%LOCALAPPDATA%\Android\Sdk

eg: C:\Users\xxxx\AppData\Local\Android\Sdk

可以在 Android Studio 设置中的Appearance & Behavior → System Settings → Android SDK 下找到 SDK 的实际位置。

RN 学习小记之使用 Expo 创建项目

验证环境变量已添加：

  • 打开powershell
  • 复制并粘贴 Get-ChildItem -Path Env:\ 到 powershell
  • 验证 ANDROID_HOME 已添加

RN 学习小记之使用 Expo 创建项目

使用 Expo

为什么用 Expo ？

接下来将根据官网教程，搭建一个Expo的应用程序： Create your first app - Expo Documentation

初始化 Expo 项目

使用 create-expo-app 来初始化一个新的 Expo 应用程序。它是一个命令行工具，允许创建一个安装了 expo 包的新 React Native 项目。

npx create-expo-app StickerSmash
cd StickerSmash

在官方文档里下载演示项目所需的图片等静态资源，将项目中的 assets 替换： Download assets

现在，让我们在我们最喜欢的代码编辑器或 IDE 中打开项目目录。在本教程中，我们将使用 VS Code 作为示例。

启动项目

要在 Web 上运行该项目，我们需要安装以下有助于在 Web 上运行该项目的依赖项：

npx expo install react-dom react-native-web @expo/webpack-config

启动

npx expo start
Scan QR code启动成功
RN 学习小记之使用 Expo 创建项目RN 学习小记之使用 Expo 创建项目

Expo 推荐配合库

以下是一些 Expo 官方推荐与之配合的库：

  • 安全区域库 react-native-safe-area-context
    • react-native-safe-area-context 提供了一个灵活的 API，用于访问 Android 和 iOS 的设备安全区域插入信息。它还提供了一个 SafeAreaView 组件，您可以使用该组件代替 View 来插入视图以自动考虑安全区域。
  • 动画库 react-native-reanimated
    • 在您的 Expo 项目中，您可以使用 React Native 的动画 API。然而，如果你想使用性能更好的更高级的动画，你可以使用 react-native-reanimated 库。它提供了一个 API，可以简化创建流畅、强大且可维护的动画的过程。
  • 存储数据 Store data - Expo Documentation
    • expo-secure-store 提供了一种在设备本地加密和安全存储键值对的方法。

还有其他的一些推荐库，可以看这里