React Native environment to build initialization project run debugging _react

About RN, a few days ago wrote a initialization project, this article in the project has been built on the basis of the following posted on the article connection:

Hello RN

After passing through the previous article, we should be running, but what is the development IDE for RN?

I've read some articles and tried some things:

1. Official recommendation is atmo+nuclide. Baidu Search Atom official website, to download it, download and then open the installation of several common plug-ins to develop:

Open-in-browser

Autocomplete-paths

Atom-html-preview

2.WebStorm (personally like some of their company's software), but it is not as convenient as the following, fast.

3.Sublime Text 3. This one is awesome, it's really convenient. There are only a few plug-ins to install:

Reactjs: Support react development, code hints, highlighting

Emmet: Front-End development must be.

Terminal: Opens the terminal in the sublime and navigates to the current directory, the artifact, the Mac shortcut key is: command+shift+t

The specific installation steps refer to the following great God's blog:

Sublime Plug-in Installation

Where static code check there are some problems, please see the following great God's article, wrote very detailed, there are questions we will discuss.

Static code checking plug-in configuration

Here's what I did when I opened my project with sublime:

At this time we want to run our project, if you have installed a plugin above (Terminal), press Command+shift+t, will open the terminal, directly into your project directory.

No installation does not matter, open the terminal step two step by step into your project directory.

At this point, we first run to the iOS emulator:

The terminal enters React-native run-ios carriage return, waits compiles, can run to our iOS simulator.

This is when we change the code in the outermost index.ios.js file of the directory:

Only a few of the original words changed.

Now want to refresh the simulator we have run the project in accordance with native development is:

Recompile run, and RN we just need to press command+r on the emulator (IOS).

If not, you check if your simulator's keyboard response is off, the following figure:

This will refresh our application at any time.

The next look at Android, because my computer memory is nearly full, so uninstall a lot of applications (including Android genymotion), so I use the real machine.

After connecting the computer, in just the terminal input: react-native run-android carriage return compile.

Run to the phone, just now we in the Index.ios.js file changed a few words, now we are in the Index.android.js document casually also change a few words.

This time refresh is, shaking the real machine screen, there will be a window, the first option is reload, refresh ....

You may encounter an error could the red screen not connect to development server.

We need to set the application to the local ip:8081

Below the Mac get native IP method, create a new terminal window, enter:

Ifconfig | grep "inet" | Grep-v 127.0.0.1

Came out.

And then how to set it. or shaking the phone screen, dev Settings----> Debug Server Host & port for device in the menu

After the click there will be an input of the window, you enter the ip:8081 you have just acquired the machine.

After the confirmation returns return returns, Reload again. All right....

Finally posted in the Civil Service network:

China Civil Service Network

These two main records of the early development of some small operations.