react-native stepping on the documentary (1)-installation environment

Because of various problems with using Expo, I have given up using Expo for development. Still use the complete soundtrack environment for development.

---

1. Installation environment

Nodejs needs to be installed to develop rn. My machine has it. This step is unnecessary. Then open the official website of rn

https://facebook.github.io/react-native/docs/getting-started.html

After taking a look, the get start on the official website used Expo to develop. I realized that this thing can quickly enter the development state. Without installing android-studio, the mobile phone can be directly used with an Expo client, saving a lot of time, and supporting HMR, which is very convenient.

Mobile environment installation

Apple mobile phone expo client direct search in appstroe, Andrews because of the wall, directly in the official website click to download it.

pc environment installation

Follow the steps step by step

First install Expo CLI, execute under cmd

npm install -g expo-cli

Finish creating a new project with Expo

expo init my-app

Then it will choose a template, blank is an empty template, and the tabs template will have some pre-made components. Because I want to use the ant-mobile-rn component later, I chose blank .

If Unexpected end of data: blank-31.0.1.tar appears, you can delete the .blank-31.0.1.tar.gz file in C: \ Users \ XXXX \ .expo \ starter-app-cache in the user directory and re-execute expo init.

After the installation is complete, continue the data as follows:

cd my-app
npm start

The appearance of the following picture on the console is successful. At the same time, a web page will pop up. Now I can't use it, so I close it.

At this time, I took out my mobile phone and entered it by scanning the client code.

The first entry is slower and there is a compilation process on the server (the console will show a progress bar). Well, there will only be compiled when there is client access, don't ask me how . Before going in to complete, the client looks like this.

After completion, it automatically becomes like this.

Even if the development environment is ready, the next step is to install third-party controls for app development .