Android React-Native series (1) Zero-Infrastructure React-Native Development Environment

Android React-Native series (1) Zero-Infrastructure React-Native Development Environment

I have heard of the well-known React-Native for a long time. (We don't know much about it here, because the company's business is not too busy, just now we can have time to learn about RN. We know that building an environment for any language is the first step. This blog post mainly introduces how to build an environment for RN.

1. Install HomebrewHomebrew (brew for short), which is an indispensable software package management tool on Mac OS X. We can use it to install or uninstall various tools (note: this software is used to install UNIX tools that OS X does not have on Mac, such as wget. The image is equivalent to an App Store ), we can install multiple tools through Homebrew. Homebrew Installation Method: 1. Open the terminal to enter the/usr/bin/directory; 2. Enter the following command on the terminal:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

This is an official ruby command for installing Homebrew. The reason why this command can be directly executed is that ruby has been installed by default on the Mac system, as shown in the installation result: 3. After the installation is complete, when we enter the command brew-v on the terminal, information about the Homebrew version number will be entered as follows:

Homebrew 0.9.5 (git revision 5c6e; last commit 2016-03-25)

After this step, it indicates that Homebrew is successfully installed. Ii. Install Node. js1: Installing nvmnvm is a simple bash script, and Node is versioning through nvm. So when we install multiple different Node versions locally, you need to install nvm to control the switch between nodes of different versions. Run Homebrew to install nvm. Run the following command:

brew install nvm

Shows the execution result:
2. After installing Node. js and nvm, start to install Node. js. Enter the following command:

nvm install node && nvm alias default node

At this time, the problem occurs. The prompt is that the nvm command cannot be found. Therefore, run the brew info nvm command to check the problem. The output result is as follows: the message is very clear, that is to say, it does not exist in the root directory. nvm directory, obtained in the root directory. add the configuration file to the bash_profile file, so the first step is to create it in the root directory. nvm directory, and then in. run the following command to import the bash_profile file: After completing the preceding two steps, run the node-v and npm-v commands respectively. The corresponding version number indicates that the installation is successful. The result is as follows: after the node and npm are successfully installed, continue to install the node. js, enter the following command:

nvm install node && nvm alias default node

The installation result is as follows: 3. Install watchman and flow1. Install watchmanwatchman, an open-source project of Facebook. It monitors files and records file changes, when the file changes, it can start some operations, such as executing some commands. Install watchman through Homebrew and enter the following command on the terminal:

brew install watchman

The installation result is as follows: 2. Install flowflow as a JavaScript static type checker. Install flow through Homebrew and enter the following command in the terminal:

brew install flow

The installation result is shown in:
4. Install the React-Native1, enter the following command in the terminal to install React-Native

npm install -g react-native-cli

Shows the running result. The preceding interface is displayed, indicating that React-Native is successfully installed. V. Clone Demo project and perform test 1. Run the following command:

react-native init AwesomeProject

Shows the running result:
2. Set the Android SDK path to open the. bashrc and. bash_profile files in the root directory using the vim editor. Enter the following command:

Export ANDROID_HOME = Your SDK path

3. Start the simulator and run the Demo project. Enter the following command:

react-native run-android

As shown in the running result: This running result is not the result of running in Demo. This is a good practice. The React-Native environment has been set up till now, the next step is to practice the corresponding controls on the Android end of React-Native. Please wait ......