Android moved to React-native's Windows Android environment to build a crawl and a history of tears

Objective

Recently, there are new projects, so long have not written a blog, and then all use leisure time to learn react-native.

Because the employment environment of Android and iOS brings unprecedented impact to mobile development, so many partners have to find another way, and now the more popular Hybird and react-native are also the impact on our mobile side, such as going to interview will ask you will nodej or react not , the front-end engineer (JS) to move the threshold becomes very low, angularjs and Reactjs are very good, and at the end of June Ali Open source Weex, estimated many people to Weex or special look forward to, alas, can only take knowledge to arm themselves.

React-native in the eyes of Android developers

React-native is fackbook of the F8 summit, Haha, as far as I know Ctrip has been used, the effect is also good, is said to be lighter than angularjs things, so decisive or preferred to choose this, what ionic+corvoda+ Angularjs model is really playing, and then to learn the words really is to spend too much time, comprehensive consideration or react-native more practical significance.

Pit Force React-native for Android

First of all, have to spit out the React-native team, but more is to feel the power of Facebook, F8 just 8 hours out of such a powerful thing, the project code is developed on the Mac, but also the first to support the development of Mac platform, the Windows platform was later expanded, In particular, Android is out of iOS after several months to do, so build a development environment pit to pit, under Windows to build React Native Android development environment is not very difficult, it is really bitter I this Android dog. After a few days of tossing and taking, finally succeeded, here to record the problems encountered, hoping to help to learn about the React-native Android development later.

React said is lighter than angular, and then looked at the demo effect is really good, although a based on the view to develop things, than the lag much better, you say experience not good webapp can fire to explode, it seems that react-native is the prospect of development, Will react really is into can attack back can keep, but react-native pit more No limit, so for me is also a big test.

Links

React-native Official website: http://facebook.github.io/react-native/

React-native Chinese web: http://reactnative.cn/

React-native Chinese Community: http://bbs.reactnative.cn/

Windows react-native Android Environment setup

For react-native in Windows, especially Android environment configuration will always encounter such or such a pit, but what to do: since the choice is pays top academics we have to move forward .

Configuration of the JDK and Android SDK

I am the Android native development, special is not familiar with this step for I can ignore, but react or iOS turn around to learn react-native Android is still necessary to know.

Official documentation is recommended that we install Android studio2.0 or above and then SDK is to go inside to download, I developed is 2.1.1, and then to develop Android must install JDK Java Development environment, personally recommended jdk1.8.

In fact, I think that Android studio what is secondary, is mainly a set of good configuration points, not so still can develop hair ah, said the reason is the SDK offline download much faster (http://www.androiddevtools.cn/data is very full, You're going to have to die and lose it. Yes, comrades, download it. It is important to remember to configure environment variables.
The official recommendations need to be installed such as:

Note of non-Java development, well-equipped such as:

Can only be explained that has been configured, but also to verify the success, see:

Install Nodejs (Pit one)

Official website: http://nodejs.cn/

A very simple step, download the installation, the environment is automatically configured, and finally configure the global environment to path, I downloaded the version of v5.8.0.

CMD, run the following command to install the React-native tool:

-g react-native-cli

I have no problem, but see the group said that someone has a problem (Win7)
Running the result is very strange, no prompt installation is successful, there is no prompt installation error, however, run the react-native command, the prompt command does not exist.

Solution: Install v4.x.x low version, do not install v5.x.x high version
The company computer appeared, the personal computer is win10 no problem.

Install Git version control

git download: Https://git-scm.com/download/win
Anyway, all the way next, remember to configure the environment to path.

Install Python (PIT II)

Previously installed on the computer Python3.5 version, but also use a key multi-channel packaging fashion, so skip this step, directly create the project

react-native init MyProject

Error hint, probably meaning that the Python version is incorrect.

Solution: Install the 2.7.x version, the version cannot be higher than 3.0.0

Available here: https://www.python.org/downloads/, configure the environment to path after installation.
Look at the version like:

VCBuild.exe not found, Win7 installation vs2015 error (Pit III)

Think of the preparation done, and then continue to use the command:

react-native init MyProject

Error message:

Msbuild:error MSB3428: Failed to load Visual C + + component ' VCBuild.exe '. To resolve this issue,

1) Install the. NET Framework 2.0 SDK;
2) Install Microsoft Visual Studio 2005;
3) If the component is installed in a different location, add its location to the system path.

To scare the baby. The Visual C + + component VCBuild.exe can not be found, a look is to install the environment of C + +, then Baidu and Google said: Download and install Visual Studio 2013 or 2015. You can also choose other C + + environments such as the Windows SDK, Cygwin, or MinGW.

I want to pretend before Cygwin for the NDK development, incredibly did not find VCBuild.exe I also tears, because it is in the company's computer, I asked the react-native said is to install VS, I look at the vs2015 download website Special installation package is too large, but still down, the result of the installation is very angry with me, such as:

Win7 Enterprise Edition online upgrade Win10 failed (Pit Four, this you may not meet)

Enterprise Edition also can not upgrade to WIN10, there may be a lack of C drive, hardware test failed.
With a fucking mood, put vs2015 into the mobile hard drive home to continue to install.

Cl.exe exit, Init failed (Pit v)

I own computer is WIN10,C disk 160g directly installed in the C drive, the speed of the home is really turtle speed, hard to wait or vs2015 installed, and then that is the installation of the default components (not thought here is actually a pit).

To continue using the command:

react-native init MyProject

Error message:

Error MSB6006: "CL.exe" has exited with code 5. C:\Program files\msbuild\microsoft.cpp\v4.0\platforms\win32\microsoft.cpp.win32.targets

This special is a big head, but also a Google came to the conclusion is not installed C + + components, I thought vs2015 default comes with C + + seems I was wrong, directly open the new C + + Project Download C + + components, I am 15g waiting for me, turtle speed of the net of this thing is a waste of 3 hours to 12 points.
It is gratifying to note that there is no error in running the command.

react-native init MyProject

Open Service (pit Six, too many pits)

After the initialization is complete, the heart is still quite happy, then opens the service:

react-native start

I was so happy that I forgot to go to the engineering catalogue to run the command, and then CD MyProject then react-native start,

Visit http://localhost:8081/index.android.bundle?platform=android with your browser to see if you can see the packaged script. The first visit typically takes more than 10 seconds, and the progress bar can be seen on the command line of the packager. Slow to see the progress bar, failure occurs as follows:

This page explains that the Android project was not compiled successfully

Solution:

You need to delete the files under this path under Project (MyProject): myproject/node_modules/react-native/node_modules/react-transform-hmr/node_modules/ React-proxy/node_modules/react-deep-force-update/.babelrc

Such as:

To execute the order again: React-native start, reported as wrong:

This isn't a timeout, is it?

Workaround:

Modify this file myreact\node_modules\react-native\packager\react-packager\src\filewatcher/index.js

Put the original
Const MAX_WAIT_TIME = 25000;
Revision changed to
Const MAX_WAIT_TIME = 250000000;

The next result is satisfying:

Install apk problem One (pit seven)

To execute the installation command:

react-native run-android

Error occurred:

Problem occurred configuring project ': App '.
Could not resolve all dependencies for configuration ': App:_debugcompile '.
Could not find com.android.support:appcompat-v7:23.1.1.

Solution Solutions

Install Android support repository with Android support Library

Install apk problem One (pit eight)

react-native run-android

Error: Said Gradle error, then APK is not generated
Google a search said that Gradle download failed or does not match gradle-2.4.0, there are 2 ways:

Method one: Offline download gradle-2.4.0 package (my machine is loaded with 2.10, so I discard this)
Method Two: Manually change the Android directory Build.gradle to 2.1.0, the Local.propertices test in the inside configure their own SDK path, and then put their own Android project under the Gradle folder replaced.

Decisive installation to my charm Blue note2 cell phone Strange is a blank, Google a search is said to have no IP and port, I have to follow the solution to shake hard, the result is not out of Dev Setting dialog, and then mobile phone only a home button, I have no way. (Special to later only know some mobile phone default does not open the suspended window, open method: "Android mobile phone floating window how to open")

Real-machine running and commissioning project (pit nine)

To this step I can not give up, the heart is that gas, decisive change on my night God simulator, haha or good shake a shake function, but it is a piece of red.

Solution Solutions

Modify the App project IP configuration

1, mobile WiFi and PC network to ensure the same LAN

2. cmd run ipconfig view PC local IP address

3, the Real machine project click the Menu key (the general leftmost button), open the Debug window, select the configuration item, point to the last entry of the PC's IP address and port number 8081, re-loadjs

Shake out the interface

Set IP and port
The fuck is, there is no reflection, Google a search incredibly said the service was broken.

React-native start cannot be disconnected during operation (pit 10)

When I heard the news I was also drunk, start after the other to open a console, accidentally disconnected service.
Only re-open the service: CD MyProject and then react-native start
Then the simulator (mobile phone) Reloadjs, a magical scene appeared.

See:

Prove that the configured IP and port are exactly right, then look at the phone (simulator)

Summarize

Use a few days to configure the environment, although not occupy the company's development time, and then also for their own charge, see the group inside the students are also a variety of configuration problems in the repeated asked, make no one answer, because there are always a variety of wonderful problems.

• Never forget to configure global environment variables to path
• React-native operating environment must be installed in C + + environment, do not necessarily need to install VS
• Gradle must be careful otherwise the APK fails to install
• Python is not necessary to install just for the benefit of developing
• Service must not stop, this is a pit, of course, you pack to put Jsbudle as assets directory after you do not need to start the service

A few main commands:

1. Initialize Project react-native init projectName

2, DOS into the project folder after React-native Start, start the service

3. Open a DOS window and launch the application: React-native run-android

On the whole, you can solve the problem one step at a way, according to the information on the Internet. I encountered problems with the environment I installed before, so caused some problems, the process of knowledge exploration may not be so smooth, I wish everyone can happily study.

Come On,enjoy it.

Android moved to React-native's Windows Android environment to build a crawl and a history of tears