The React Native tour

React Native pits start

u

5.1 The holiday is over so short, what did you do?

๐Ÿ˜‚, I added 3 days of class, how about you?

Recently, the company has a React Native project, so I have to learn RN. Since I have learned React before, learning React Native process is not too difficult.

Learn React Native and step on a lot of pits. Summarize the article so that other friends can develop RN easily and reduce the pits. ๐Ÿ˜‚

“

Install the React Native environment (You must comply with the following requirements; otherwise, an environment error may occur)

  • Python 2.x, version 2.x must be installed.
  • Node, version must be 12 or greater
  • The Java JDK environment must be version 1.8

Lack of Python environment

The project relies on the installation tool

  • Yarn is preferred for fast dependency on foreign resources
  • Npm, the download speed will be very slow, you can set taobao source, speed up

Mobile phone Simulator debugging

  • Install Android Studio (the environment for configuring AS is not covered here)
  • Night depth simulator
  • Other simulators

Install React Native scaffolding

u

I installed it according to the scaffolding provided by the authorities. Various pits appeared, the project was created, the project was started, and various errors were reported. Finally, all kinds of baidu failed.

Then I chose EXPO, which smells good.

“

Official scaffolding
1.Global installation scaffolding NPM uninstall -g react-native- CLI2.Create a new project, react-native init ProjectName3. yarn start
Copy the code

Install EXPO scaffolding

What is the EXPO

u

Expo is the framework and platform for the universal React application. It’s a set of tools and services built around React Native and Native platforms to help you develop, build, deploy, and iterate quickly on iOS, Android, and Web applications from the same JavaScript/TypeScript code base.

“

Erection of scaffolding
1.You are advised to install EXPO using YARN//  NPM install -- Global Expo - CLI (NPM, installed for half an hour, still not complete...... ๐Ÿ˜ญ)
2.Create the project Expo Init my-project
Copy the code

EXPO provides very convenient development and convenience

u

From the development of the project to the final launch, it was very easy.

When you want to package your App as an APK file:

You can use the directive provided by EXPO: EXPO Build: Android

When packaging, the EXPO account will be needed, because it will be published to your EXPO account, generate APK file, and publish to the app store. Certificates or materials are required, and it will generate one for you. We don’t need to worry about it at all, just focus on coding.

“

The following is a demonstration of EXPO operation

Create a project

It will take a while to download dependencies

EXPO Project Introduction

Start the projectyarn start

u

Once successful, it launches a service that automatically opens a web page where you simply connect your phone’s emulator or real phone to your computer and hit Run on Android Device to Run it on your phone.

Isn’t it easy to use the official provided, your own configuration, find the emulator. ๐Ÿ˜

“

โ€‹

React Native supports hot updates

u

So it makes it very easy for us to debug, change data, change view at the same time when we’re developing an APP.

“

Packaging project

u

Since I’m a Windows environment, I’ll cover only how to package Android APK files here.

It is also possible to package IOS to read official documents, which may not be very friendly to Chinese people. Pure English, translation tools can help us.

“

If the package is successful, it will provide a link to download the packaged APK file

Download the APK

According to the effect

This is the end of it

u

This chapter introduces how to configure the React Native environment, how to use the EXPO tool, and how to package it into AN APK file from 0.

In the middle, I stepped on many pits, write an article to record, other friends can reduce the time to step on pits, focus on business development, so as to develop high-quality APP applications.

“

Happy 5.1 to you all

Original is not easy, feel good to share praise ๐Ÿ‘

Pay attention to the public number, you can join the ‘front self-study communication group ‘๐Ÿ‘