React Native 简单教程

作为一个 JavaScript 开发者，我之前从来没想过用 JavaScript 很容易地写原生移动应用。当然，我们已经有了如 PhoneGap 等工具，但在原生应用中封装一个基于浏览器的应用还有许多需要改进的地方。

现在这一切都改变了—— Facebook 的 React 团队发布了 React Native。它不仅可以让我们使用 React 框架来使用原生移动组件创建应用程序，但它使一切成为了现实——这意味着我们在开发应用时不需要重新编译——这使得它非常容易地创建移动应用！我有幸预览了 React Native 的 beta 版本，从那开始它大规模成长了起来。

请注意，目前已经支持 iOS。因此你需要运行 OS X 上的 Xcode 来跟随本教程。

如果你还没有过机会学习 React, 看看我的教程来开始用用它吧.

要重点注意学习这个并不意味着我们可以写一次代码就能将这段代码用到每一个地方。尝试那样做会因为疯狂的抽象级别而陷入一场灾难。React Native 则让我们可以学习一次，到处编写。

回到 2004

如果你关注社交网络领域的话你会记得 FaceMash，正式这个应用开创了 Facebook。对于不关注这个领域的人，其实是11年前(哇塞)
Mark Zuckerberg 创建了
FaceMash，它是一个你可以用来查看两个人之中谁更加热门的应用程序。每一个人都有一个能反映他们有多“热门”的分数值（尽管不知道原来使用的是什么算法，不过那部电影（社交网络）显示 Elo 排名算法曾被使用过) .

它全部的荣耀都在于此 -

让我们整个来过一遍吧 - 我们准备用 React Native 来重新创建 FaceMash。如果你觉得凭外貌来评价姑娘们不道德，你可以把图片变成你觉得能吸引人的其它事务(狗狗，代码块，等等，我不做评价)，随便。

创建你的应用

如你所愿，你可以从这儿 clone 到初始的代码库。这不是必须的，不过为了不让你错过不同阶段代码的不同分支，你可以 clone 一份下来!

休斯顿，我们已经升空

如果你没有 clone 代码库，就需要设置基础项目. React Native 可以让我们使用 react-native-cli npm 包 CLI 快速开始一个项目。如果你还没有安装这个，可以快速运行命令：

npm install -g react-native-cli

然后我们就可以开始了.

在终端里导航到一个文件夹并运行命令：

react-native init FaceMash

这样做能为我们准备好基础到应用程序，供我们挖掘和加入更多东西.

打开它

打开 XCode 并浏览到你创建了应用程序的目录里面. 你需要从这里打开 facemash.xcodeproj。

React Native 支持我们在 iOS 模拟器和实际的 iOS 设备上工作.

我将会在 iOS 模拟器上面进行开发，因为它运行更多快速的应用程序开发 - 当我们修改了JavaScript 时，可以按下 Command +
R 组合建来刷新应用，或者我们也可以通过 developer 菜单(通过 Command + Control + Z
就能访问到)启用动态重新载入来变成超级懒人。我们设置可以在Chrome的开发者工具中调试我们的代码。

如果你希望使用你的 iOS 设备来开发你的应用程序，就需要让设备痛你的计算机处于同一个网络中。React 默认会在 localhost 找到 JavaScript，所以就需要你将它指向你的计算机.

我们可以通过编辑 AppDelegate.m 文件，将 localhost 改成我们的本地 IP 来达成这个目的. 你可以通过按下 Alt 的同时点击 wireless 菜单在 OS X 来找到这个东西.

现在就可以运行我们的应用程序了。应用程序会在你在 XCode 中选择的目标中打开. 当我们点击运行，同时会产生一个在我们应用程序目录中运行着
npm start 的终端线程. 如果你不希望通过 XCode 运行应用，确保你运行了 npm start。这将会创建一个在端口8081上的本地
web 服务器，它指向我们编译好的 JavaScript 代码，并且也会监视到我们保存代码的动作以进行重新编译。