HomeWeeklyFriendsAboutMusic

React Native Learning Notes - Creating a Project with Expo

发表于 2023-06-20 01:33 1200 字 6 min read

cos avatar

cos

FE / ACG / 手工 / 深色模式强迫症 / INFP / 兴趣广泛养两只猫的老宅女 / remote

201 Articles

21 Categories

136 Tags
Home Weekly
Categories Tags Archives
Friends About Music
Automating Electron App Submission to MAS (Mac App Store) with GitHub ActionsAdding a Pluggable Christmas Effects Module to an Astro BlogImplementing LQIP (Low Quality Image Placeholders) in an Astro BlogFrom Pixels to Particles: Designing and Implementing Image-to-Dynamic-Particle Conversion with p5.jsTailwind CSS v4.0 Upgrade and Astro 5.2 Project Migration NotesThe Joy and Benefits of Optimizing JavaScript [Translation]React Native Learning Notes - Creating a Project with ExpoFloating UI Practical Guide - DialogSharing My Experience with Floating UI - PopoverWhat Surprises Does Tailwind CSS v3.3 Bring?Frontend Interview: Detailed Comparison of onclick vs addEventListenerDeep Dive into JavaScript (Part 2): Classes in JavaScriptDeep Dive into JavaScript (Part 1): Objects, Classes, and Object-Oriented ProgrammingRedux Learning Journey (Part 1): Redux Three Principles, createStore Internals and ImplementationBrief Notes on Learning React
本文记录了作者从零开始搭建 React Native（RN）项目的过程，重点介绍了使用 Expo 搭建 RN 项目的流程与优势。通过详细说明 Windows 环境下安卓开发环境的配置（如安装 Android Studio、配置 SDK 13 及 ANDROID_HOME 环境变量），以及 Expo 的核心功能和推荐库（如安全区域、动画、存储、地图等），帮助有前端基础的开发者快速上手并高效开发跨平台移动端应用。

This article has been machine-translated from Chinese. The translation may contain inaccuracies or awkward phrasing. If in doubt, please refer to the original Chinese version.

Due to business requirements, I started learning React Native in preparation for upcoming needs. Although I had used RN before, the project setup was always handled by pre-built scaffolding, so I didn’t know much about the fundamentals. I decided to document the process of setting up an RN project from scratch, along with some resource collection.

Suitable for: People with front-end development experience and a basic development environment who want to learn about setting up RN projects with Expo

RN Resources

Development Environment

Setting Up Android Development Environment on Windows

For Android, the key thing to note is installing Android Studio & Android SDK. Android Studio installs the latest Android SDK by default. Currently, compiling React Native apps requires the Android 13 (Tiramisu) SDK version (note that the SDK version is not the same as the device OS version — RN currently supports Android 5 and above). You can select and install various SDK versions in Android Studio’s SDK Manager.

1. Install Android Studio

Download and install Android Studio. During the Android Studio installation wizard, make sure the boxes next to all of the following items are checked:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device
  • If you are not already using Hyper-V: Performance (Intel ® HAXM) (For AMD or Hyper-V, see here)

2. Install Android SDK

Android Studio installs the latest Android SDK by default. Building a React Native app with native code requires the Android 13 (Tiramisu) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

  1. Open Android Studio, click the “More Actions” button and select “SDK Manager”.
  2. Select the “SDK Platforms” tab from within the SDK Manager, then check the box next to “Show Package Details” in the bottom right corner. Look for and expand the Android 13 (Tiramisu) entry, then make sure the following items are checked:
  • Android SDK Platform 33
  • Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

Pasted image 20230620141725.png

  1. Next, select the “SDK Tools” tab and check the box next to “Show Package Details”. Look for and expand the Android SDK Build-Tools entry, then make sure 33.0.0 is selected (PS: it’s now 34.0.0)
  2. Configure the ANDROID_HOME environment variable Go to Advanced System Settings - Environment Variables - Click New… to create a new ANDROID_HOME user variable, pointing to your Android SDK path:

Pasted image 20230620141904.png

By default, the SDK is installed at the following location:

%LOCALAPPDATA%\Android\Sdk

e.g., C:\Users\xxxx\AppData\Local\Android\Sdk

You can find the actual location of the SDK in the Android Studio settings under Appearance & Behavior -> System Settings -> Android SDK.

Pasted image 20230620141558.png

Verify that the environment variable has been added:

  • Open PowerShell
  • Copy and paste Get-ChildItem -Path Env:\ into PowerShell
  • Verify that ANDROID_HOME has been added

Pasted image 20230620142037.png

Using Expo

Why Use Expo?

Expo is a set of tools, libraries, and services that allow you to build native iOS and Android apps by writing JavaScript. In plain terms, it’s an additional layer of abstraction built on top of React Native that makes development more convenient and faster.

  • If you have mobile development experience, you’re probably worried about various native features (camera, photo gallery, location, Bluetooth, etc.) before diving into cross-platform development. Using Expo is significantly faster than developing a bare React Native app, and you’ll encounter far fewer pitfalls.
  • If you’re a front-end developer without mobile experience, you need this even more — otherwise the hidden limitations and pitfalls of mobile development will give you major headaches. — <cite>React Native 基于 Expo 开发（一）项目搭建 - 掘金</cite>

Next, we’ll follow the official tutorial to set up an Expo application: Create your first app - Expo Documentation

Initialize an Expo Project

Use create-expo-app to initialize a new Expo application. It’s a command-line tool that creates a new React Native project with the expo package installed.

npx create-expo-app StickerSmash
cd StickerSmash

Download the static assets (images, etc.) needed for the demo project from the official docs, and replace the project’s assets folder: Download assets

Now, let’s open the project directory in our favorite code editor or IDE. In this tutorial, we’ll use VS Code as an example.

Starting the Project

To run the project on the web, we need to install the following dependencies that help run the project on the web:

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

Start the project:

npx expo start
Scan QR codeSuccessfully launched
Screenshot_2023-06-20-14-37-42-694_host.exp.expon.jpg
Screenshot_2023-06-20-14-37-23-383_host.exp.expon.jpg

Here are some libraries officially recommended by Expo to use alongside it:

  • Safe area library react-native-safe-area-context
    • react-native-safe-area-context provides a flexible API for accessing device safe area inset information on both Android and iOS. It also provides a SafeAreaView component that you can use instead of View to automatically account for safe areas.
  • Animation library react-native-reanimated
    • In your Expo project, you can use React Native’s Animated API. However, if you want more advanced animations with better performance, you can use the react-native-reanimated library. It provides an API that simplifies the process of creating smooth, powerful, and maintainable animations.
  • Data storage Store data - Expo Documentation
    • expo-secure-store provides a way to encrypt and securely store key-value pairs locally on the device.

There are other recommended libraries as well. You can check them out here:

开始使用 React Native 和 Expo SDK - 掘金

喜欢的话，留下你的评论吧～

© 2020 - 2026 cos @cosine
Powered by theme astro-koharu · Inspired by Shoka