React Native iOS environment setup

React Native iOS environment setup
React Native iOS environment setup

Some time ago, when React Native for Android was released, more and more companies began to study and use React Native. So we also took the time to build the iOS development environment on Saturday so that we can learn it in the future.

The following is a simple list of steps.
1. Install Homebrew
Homebrew is mainly used to install watchman and flow
Open the MAC terminal and enter the following command:

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

2. Install nvm and nodejs
Nvm is a tool for nodejs version management and is used to install nodejs.
For nvm, you can use brew for direct installation, but I have not used this installation. You can try the following command by yourself:

brew install nvm

In another method, enter the following command in the terminal:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.1/install.sh | bash

According to the official instructions, this command should automatically configure the environment and be able to use nvm commands on any terminal. However, it is not possible after I have installed it. You need to do additional work in ~ /. Bashrc ,~ /. Profile ,~ /. Zshrc file (if not created by yourself), add the following statement:

. ~/.nvm/nvm.sh

In this way, nvm commands can be used on any terminal.
Run the following command:

nvm install node && nvm alias default node

This is used to install nodejs and npm. Npm is used for nodejs package dependency management tools.
3. Install watchman
Watchman is a tool used to listen for file changes. It should be used to listen for file changes and then respond to the interface. Run the following command:

brew install watchman

4. Install flow
Flow I personally understand is a tool used for Static Analysis of js syntax errors, which can be used for earlier js syntax errors. Run the following command:

brew install flow

The basic environment is configured here. Next, create an iOS example, switch the directory to the directory where you saved the project, and then execute the following command:

$ npm install -g react-native-cli   $ react-native init AwesomeProject     $ cd AwesomeProject/      

The first execution of the second command takes a long time because many things need to be installed. Then, run the following command on the terminal to open the project:

open ios/AwesomeProject.xcodeproj

In this way, the iOS project is opened and the interface in the simulator is displayed after you run it.
Next, try to modify the text in index. ios. js, and then press Cmd + R on the simulator, so that the modification will be immediately displayed on the simulator.

This is the end of early adopters. I have to study React Native in the future and look forward to future articles.