Teach you how to build iOS React native environment in your Mac

Preparatory work

1. You need a Mac computer. (This is not nonsense?) What I'm using is air~~ poor. ）

2. The environment in which I operate the computer system is

Version 3.xcode: 8.0 official edition

Required Software

1.Homebrew

Homebrew, a Package manager for Mac Systems, is used to install Nodejs and some other required tool software.

Open Terminal, execute

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

If you are in the Max OS X 10.11 (El Capitan) version, homebrew may encounter /usr/local a directory not writable permission issue when installing the software. You can use the following command to fix:

sudo chown-r ' whoami '/usr/local

After installation: After a series of waiting, (where the installation needs to enter the computer password)

2.Node

Install node. js using the homebrew you just installed

Brew Install node

After installation is complete

3. After installing node, it is recommended to set up NPM image to speed up the later process, otherwise the plugin installation is slow

NPM Config Set registry https://registry.npm.taobao.org--globalnpm config set disturl https://npm.taobao.org/ Dist--global

4. Install yarn

Yarn is a tool that Facebook offers to replace NPM to speed up the download of node modules. React Native's command-line tools are used to perform tasks such as creating, initializing, updating projects, running packaged Services (packager), and so on.

NPM install-g Yarn REACT-NATIVE-CLI

After installation is complete

5.Watchman

Watchman is a tool for monitoring file system changes provided by Facebook. Installing this tool can improve performance at development time (Packager can quickly capture file changes for real-time refresh).

Brew Install Watchman

6.Flow

Flow is a static JS type Check tool. What you see in many examples is the weird colon question mark, and the same syntax as the type in the method parameter, which is the grammar of the flow tool. This syntax does not belong to the ES Standard, just Facebook's own code specification. So the Novice can skip directly (i.e. no need to install the tool, and it is not recommended to bother learning flow-related syntax).

Brew Install Flow

After the completion of the operation, the environment is basically playing well, missing is an IDE, since react native is a Facebook thing, then use the Facebook recommended solution, where the use of Atom+nuclide plugin

1. Install Atom

(This egg hurts, only a few KB per second, it is recommended to turn x download)

Unzip, open after download is complete

Open normally after we install Nuclid, there are two ways to graphically download the installation and command line, both of which say

1. Graphical Installation:

Click on the menu bar:atom->preferences, or you can "command+," quick open

Then, in the Install Packets input box, enter nuclide, the first one that we want to install, click Install

When the installation is complete, there will be a menu bar in the red circle.

2. Command-line installation:

APM Install Nuclide

After the command line installation is complete, open atom and select packages->settings view->manage Packets

Then select Packages,nuclide and click Settings.

Then scroll down to find the option to tick the hook

Then restart Atom, it will perform the relevant installation, here, all the installation is complete!.

Finally, let's create an engineering experiment.

Use the command line CD to the desktop, and then

React-native Init project Name

Folder contents after the project is created ....

If you open the. Xcodeproj run directly with Xcode, the result will be:

This is not a line of code of the project, if you want to modify, you can open atom, click Add project Folder , find the project you just created open,

Open after file directory:

Can find me open here is ios.js, if it is Android's partner is of course open android.js

Then you'll be free to develop ....

Teach you how to build iOS React native environment in your Mac