banner
cos

cos

愿热情永存，愿热爱不灭，愿生活无憾
github
tg_channel
bilibili
HomeArchives关于♪歌单NFT作品集

RN Learning Notes on Creating Projects with Expo

#前端#跨端#react-native1252
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
The person is learning React Native (RN) for future business needs and wants to document the process of setting up an RN project from scratch. They also plan to collect relevant resources. The target audience is individuals with basic frontend knowledge and development environment who want to learn about the process of setting up an RN project with Expo. The person provides links to official websites, Chinese websites, GitHub resources, and a blog post. They also provide instructions for setting up the development environment on Windows for Android development using Android Studio and Android SDK. They mention the benefits of using Expo for faster and easier development. Finally, they provide instructions for initializing an Expo project and starting it.

Due to business needs, I started learning RN in preparation for future requirements. Although I had used RN before, the project setup was done using a pre-packaged scaffold, so I didn't have a deep understanding of it. Therefore, I plan to document my personal process of setting up an RN project from scratch, while also collecting some resources.

Suitable for: Those with a front-end background, who have a basic front-end development environment, and want to understand the process of setting up an RN project with Expo.

RN Related Resources#

Development Environment#

Setting up Android Development Environment on Windows#

On Android, it's important to install Android Studio & Android SDK. Android Studio will by default install the latest version of the Android SDK. Currently, the SDK version required to compile React Native applications is Android 13 (Tiramisu) (note that the SDK version is not the same as the terminal system version; RN currently supports devices running Android 5 and above). You can choose to install various versions of the SDK in the SDK Manager of Android Studio.

1. Install Android Studio#

Download and install Android Studio Download and install Android Studio. In the Android Studio installation wizard, make sure to check the boxes next to the following items:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device
  • If you haven't used Hyper-V: Performance (Intel ® HAXM) (for AMD or Hyper-V, please see here)

2. Install Android SDK#

Android Studio will install the latest Android SDK by default. Building React Native applications with native code especially requires the Android 13 (Tiramisu) SDK. You can install other Android SDKs through the SDK Manager in Android Studio.

  1. Open Android Studio, click the "More Actions" button, and select "SDK Manager".
  2. In the SDK Manager, select the "SDK Platforms" tab, and check the box next to "Show Package Details" in the lower right corner. Look for and expand the Android 13 (Tiramisu) entry, and ensure 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
3. 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, and ensure that 33.0.0 is selected (ps: now it is 34.0.0).

  1. Configure the ANDROID_HOME environment variable
    Advanced system settings - Environment Variables - Click New... to create a new ANDROID_HOME user variable pointing to the path of your Android SDK:

Pasted image 20230620141904.png

By default, the SDK is installed in 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 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 allows you to build native iOS and Android applications by writing JavaScript. In simpler terms, it adds an additional layer on top of React Native, making our development easier and faster.

  • Those who have worked on mobile before will definitely worry about various native features (camera, photo album, location, Bluetooth, etc.) before doing cross-platform development. Using Expo will be much faster than developing a bare React Native app, and it will help you avoid many pitfalls.
  • For front-end developers who have not worked on mobile, this is even more necessary; otherwise, some hidden limitations and pitfalls of mobile development can be quite troublesome.
    ——React Native Development Based on Expo (I) Project Setup - Juejin

Next, we will set up an Expo application based on the official tutorial: Create your first app - Expo Documentation

Initialize Expo Project#

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

npx create-expo-app StickerSmash
cd StickerSmash

Download the images and other static resources needed for the demo project from the official documentation and replace the assets in the project: Download assets

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

Start 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

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

Recommended Libraries for Expo#

Here are some libraries officially recommended to work with Expo:

  • 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 Android and iOS. It also offers a SafeAreaView component that you can use instead of View to automatically consider the safe area when inserting views.
  • Animation library react-native-reanimated
    • In your Expo project, you can use React Native's animation API. However, if you want to use 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.
  • Storing data Store data - Expo Documentation
    • expo-secure-store provides a way to securely store key-value pairs locally on the device with encryption.

There are other recommended libraries, which you can see here:

Getting Started with React Native and Expo SDK - Juejin

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.