preface

React Native(RN for short) has been popular with developers since its birth. RN development is more flexible than Native development, cross-platform (Android and iOS support), more convenient for hot updates, and most importantly, it can achieve almost the same rendering and experience as Native apps. Although RN still has many features that are not perfect and there are some compatibility issues, as Native developers, we can avoid these pitfalls by adopting a hybrid development model (RN+ Native development), which also has the common advantages of BOTH RN and Native development.

To prepare

Learning RN is much easier for front end engineers, but still relatively expensive for native developers:

First of all, you need to have some JavaScript background, and for those of you who don’t have JavaScript background, trying to start straight from RN is probably pretty painful. Second, React is the core of RN. Before learning RN, you should at least have a basic understanding of React.

If no contact with front end, want to learn an RN, suggest or to learn the basic knowledge of HTML/CSS, js, etc, and then began to React, RN, such early may take more time and energy, but later will be a lot easier, no midway through the study of RN to catch up with some basic knowledge of front end.

Setting up the development environment

Since I use Windows, here is how to set up RN development environment on Windows.

Reference ReactNative Chinese, first we need to install Python2 and Node, considering the slower may chocolatey foreign web site visit, we will directly impact the Python’s official website to download Python2, download address: www.python.org/downloads/

Download Python2

Select version 2.7.13. Be careful not to select versions older than Python2, which RN does not currently support. Then download the latest Node.js MSI installation package from Node.js Chinese website, and choose according to your system bit. Download it at nodejs.cn/download/

Download the Node. Js

Install directly after downloading. After installing, it is recommended to set up NPM image to speed up the following process:

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --globalCopy the code

Install the command line tool (react-native CLI) of Yarn and RN. Yarn is a tool provided by Facebook to replace NPM and speed up the download of Node modules. React Native’s command-line tools perform tasks such as creating, initializing, updating projects, and running the Packager service.

npm install -g yarn react-native-cliCopy the code

After installing YARN, set the image source as follows:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --globalCopy the code
Installing development tools

I do Android development. I already have android Studio development tools. I will not introduce the installation of AndroidStudio and the configuration of Android-SDK. If you didn’t have it before, you add it.

There are many tools available for RN, such as Atom, Sublime, WebStorm, and other front-end development tools. Since I have been using AndroidStudio for a long time, I used WebStrom because they are all made by JetBrains and have the same interface, keyboard shortcuts and plugins, so there is no need to re-learn them.

WebStrom download address: www.jetbrains.com/webstorm/do… Download and install, only 30 days of free use, if you need to crack, there are many ways online.

Create the HelloWorld

Open WebStorm and click Create New Project to Create a New RN Project:

Select the React Native TAB on the left, location for your project directory and project name HelloWorld, and Node Interpreter and React Native for default.

After clicking Create, the build project starts. During the first build process, you need to download RN’s dependency package, which may take a long time, so wait patiently. After the build is complete, you can see the project directory structure for an RN project:

Among them are a few key documents:

  • -test-, for the test file, which stores some test JS files.
  • android, is a native Android project, can be opened with Android Studio for native development.
  • ios, is a native ios project, can be opened with Xcode for native development.
  • node_moduleReact Native/React Native/React Native/React Native/React Native/React Native/React Native
  • package.jsonRN projects have remote dependencies, usually in the root directory via the command linenpm install xxxxxx --saveT add a library that automatically writes dependencies to package.json, equivalent to build.gradle in AndroidStudio.
  • index.android.jsThis is the React Native entry file for Android.
  • index.ios.jsThis is the React Native entry file for ios.

Click the drop down button in the upper right corner of WebStorm and select Android:

The run and debug buttons appear on the screen:

Connect to the real machine and click Execute. React and React-native dependencies are added during execution. Also, if the default gradle version is not already in use, it will automatically download it, so be patient. Of course, it is best to open the Android project under RN with AdnroidStudio and change the gradle version to the existing local version before executing.

During operation, a white screen may be encountered on the real machine, so you need to enable the suspension window permission. It is also very likely that the error on the left of the image will occur, and after RELOAD, the fix on the right will appear:

The most likely scenario is the last one, where the running device (real or emulator) and the Packager Server do not share the same IP address and cannot use localhost.

Shake your phone and a dialog box appears:

Click Dev Settings to enter the setting interface, and click Debug Server Hoset & Port for Device. In the dialog box that pops up, enter the IP address of your PC’s LAN :8081

After clicking OK, go back to the home screen, shake the phone, and click Reload in the dialog again to run successfully:

React Native Chinese developer React Native