牛骨文教育服务平台(让学习变的简单)

React Native 框架托管在GitHub。要获得这个框架,你可以使用git命令克隆项目到本地,或者直接下载zip包。 如果你不想使用源代码,也可以用命令行界面(CLI)创建React Native项目,本文将使用这种方式。

React Native 使用了 Node.js,如果你的机器上没有安装Node.js,请先安装它。
首先需要安装 Homebrew,安装指南请参考Homebrew网站。然后用brew命令来安装Node.js:

brew install node

然后安装 watchman(Facebook推出的文件改动监听器):

brew install watchman

React Native通过watchman来监视代码文件的改动并适时进行编译。这就好比Xcode,它会在每次文件被保存时对文件进行编译。
然后用npm命令安装React Native 的CLI工具:

npm install -g react-native-cli

这个命令通过Node Package Manager来下载和安装CLI工具,npm是一个类似CocoPods或Carthage工具。
定位到要创建React Native 项目的文件夹,使用CLI工具创建一个新的React Native项目:

react-native init PropertyFinder

这将创建一个默认的React Native项目,其中包含有能够让React Native项目编译运行的必要内容。
在React Native项目文件夹中,有一个node_modules文件夹,它包含React Native 框架文件。此外还有一个 index.ios.js 文件,这是CLI创建的脚手架代码。最后,还有一个Xcode项目文件及一个iOS文件夹,后者会有一些iOS代码用于引导React Navtive App。
打开Xcode项目文件,build&run。模拟器启动并显示一句问候语:

与此同时Xcode还会打开一个终端窗口,并显示如下信息:

===============================================================
| Running packager on port 8081.
| Keep this packager running while developing on any JS
| projects. Feel free to close this tab and run your own
| packager instance if you prefer.
|
| https://github.com/facebook/react-native
|
===============================================================

Looking for JS files in /Users/colineberhardt/Temp/TestProject
React packager ready.

这是React Navtive Packager,它在node容器中运行。你待会就会发现它的用处。
千万不要关闭这个窗口,让它一直运行在后面。如果你意外关闭它,可以在Xcode中先停止程序,再重新运行程序。

注意:
在开始接触具体的代码之前(在本教程中,主要是js代码),我们将推荐 Sublime
Text这个文本编辑工具,因为Xcode并不适合用于编写js代码的。当然,你也可以使用 atom, brackets
等其他轻量级的工具来替代。