Take you from the zero-learning reactnative development of cross-platform app Development (i)

First introduce yourself, I nest, now work in XX share car, as the main process, the current technology stack is. NET Core+angular.

Today I am talking about reactnative from the Zero Foundation development, hope can be the novice to get started, play a guiding role.

At present, learning react native cross-platform development of more people, dry reactnative development of programmers, career change over more, have encountered before, such as: dry front, dry android/ios, dry backstage (C#,go,java ... PHP), found a very interesting phenomenon, my company colleagues to do PHP, a chance, I found him altogether learned RN, good, nonsense not to say, just want to tell everyone, RN development app effect is also good.

The next step is to start ... Are you ready?!!

First, check the environment, Reactnative (hereinafter referred to as: RN) development, the necessary environment.

Wait, here I must emphasize that RN development has two models, one is the development of the original Android/ios mixed (this development is currently in the domestic, engaged in more), and the second is Crna (create react native app) mode development, That is, using scaffolding to produce project templates. "The domestic market to Crna introduction is not much, I here first simple introduction Crna, follow-up or native Android/ios mixed this mode" temporarily not introduced Crna pattern development, and so on the domestic market mature say not later.

Tool Preparation:

1, enter the Http://nodejs.cnnodejs Chinese network, download the NODEJS installation package that is consistent with its own environment

2. After the installation package is downloaded, double-click to install

Win Platform students note that the installation process to turn off anti-virus software and a variety of security tools

3, after the installation is complete, open the command line tool, check whether the installation is successful, execute the following command:

$ node -v

The result of the command execution is the current node version, the current version of the author is:

4, check if NPM is installed successfully,

NPM is the node package management tool that needs to be used to install additional node packages

Enter the following command on the command line:

$ npm -v

The result of the command execution is:

3.10.10

Yarn

Yarn is a Facebook-based package management tool that works just like NPM. But yarn has more useful features:

• Yarn caches every package it downloads, so you don't need to repeat the download. It can also parallelize operations to maximize resource utilization, so the installation is faster than ever

• Yarn verifies the integrity of the package with a checksum before the code for each installation package executes.

• Yarn is installed with a well-formed, yet concise lockfile and an exact algorithm to ensure that the installation process running on one system will run the same way on other systems

• Network adaptation to a single request failure does not cause installation to fail and retries when a request fails

Installing yarn

Visit yarn website and download the installation package of the response platform for installation

Using yarn

When installed, other tools automatically use yarn for acceleration.

Of course, before installing, you can first check if you have already installed yarn, if the pattern appears, the description has been installed.

Yarn-v look at the current version

Installing the Create-react-native-app command-line tool

Create-react-native-app is a tool that synthesizes the creation of reactnative projects and does not require configuration, which greatly simplifies the process of getting started. Specific content, you can go to its github.com homepage to browse.

Installing Create-react-native-app requires NPM, and in any directory, enter the following command to create a reactnative project in that directory.

Note that if the Crna command-line tool is not installed, running the command directly will report such an error:

So we have to install the command line tool, also called scaffolding.

Because the NPM server outside the network, coupled with the reasons for the slow speed, this load will be very full, we do not dry.

, the installation is complete, I seem to be a bit fast network today Ah, installed 30s.

Create a reactnative Project

Templates for reactnative projects need to be created through the Create-react-native-app tool. The creation method is as follows:

1. Enter the folder where the Reactnative project is stored via the command line.

2, under this folder, execute the following command:

$ create-react-native-app myapp

MyApp is the project name and can be replaced with other characters, but must be lowercase

Installation process takes 1-5 minutes, if you want to increase the speed of installation, you can install yarn, details see yarn official website

The following is the successful installation of the author:

This process is really long, I have waited for 10 minutes. This process you don't doubt the time, really is this.

If you are impatient in this process, you can download our essential tools first: 1. Simulator, here I recommend night God Simulator. 2.Expo, this is a device that can be installed directly on the phone or in the simulator for testing projects.

Simulator will be installed, install the simulator, we configure the parameters:

To reduce our memory overhead, we put the configuration down a bit. The memory of the big local tyrants doesn't matter!

Run a preview project

1, after the project is created, you can start the project and start development and commissioning.

To start the project, first use the command line tool to enter the project directory, and then run the following command

$ yarn start

After the project is started, a QR code and a local link are generated, which allows you to preview the effect of the project operation with this QR code or local link.

This is what represents your project has run up, how to see the effect? Then look at the English characters, hint: Want to preview your app to load out what kind of hanging, then use the Expo App scan the Code tool sweep it, you can see your project is running up what kind of hanging!

Expo is what, how to find the Expo and install Expo it? To the Expo official website Https://expo.io A lot of people online Download Expo There are problems, and also someone added I want to, here if you have a problem, you can directly visit the following I give the expo download link, direct download!

Press A to open the project on the Android or simulator development device

Show QR code by q

Press R to reload the resource bundle

Press R to reload the resource bundle and clearly cache

OK, here's a little information for you:

2, after the start of the project, the need to install the Expo app on the phone, using the Expo app to preview the development of the Reactnative app run.

Here's how to install Expoapp:

iOS platform: Search the Expo client in AppStore,

Under Android platform, Access this link: http://expo.io/--/api/v2/versions/download-android-apk Download the installation package and install it, you need to give this app full permissions during installation.

3,expo app after the phone-side installation is complete, open the Expoapp, through its scanning QR code function, scan the generated QR code, you can preview the app project in the app

4, the operation effect of the new project is:

Note: There are two ways to look at the app you've developed on the Expo: 1. You can scan the code on your phone for 2. Copy the exp://xxxx.xx.xx.xx link, and on project, you can see the item,

Write code in the IDE to see the effects!

Cooked to say, 工欲善其事, its prerequisite, here I recommend you to use the VS Code editor to knock the codes, the effect is very cool!

Find the project we just created, have vs code open it, and write the code!

After I modified the content, the content of the app also changed!

Using vs code to write RN, I recommend you install a few plug-ins, the purpose of installing plug-ins for more efficient development

Well, to this step, our app even if it is run up, if you patiently and I learned here, so congratulations, you are very good, because I first engaged in this time, engaged for two days, or a face blind!

Follow-up articles continue to update, please look forward to!

Article for the author original, reproduced please indicate the source.

Take you from the zero-learning reactnative development of cross-platform app Development (i)