如何用 React Native 建立一个iOS APP？

诚然，React Native 结合了 Web 应用和 Native 应用的优点，可使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操做系统原生的 UI 组件，代替 DOM 元素来渲染等。

React Native 使你可以使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在全部开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。

其好处显而易见：减小了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差，开发新功能能够更迅速。

下面，咱们能够尝试用React Native建立一个 iOS APP.

在咱们开始以前，我建议：你能够在 Github 里先下载 React Native 的代码框架。里面还有一些示例项目，2048 的游戏， Movies（一个看电影的 APP）,SampleApp, TicTacToe (一款游戏)和 UIExplorer（能显示出全部用 React Native 替代的控件，如ListView，TabBar，MapView, Slider）），对于学习用如何用 React Native 建立 UI,这些都是很是好的例子,尤为是 UIExplorer APP，它几乎用到了每个您的 APP 中须要建立的 UI 控件。

首先，咱们先来安装相应的工具。React native 是使用 Node.js 来 建立 JavaScript 代码。若是你已经在你电脑上安装上了这些工具，你能够跳过下面这几步。

推荐使用 Homebrew的方式来安装 nvm，watchman 和 flow。

在Mac下，若是用homebrew，那么只用一行就能够装好:

brew install node

接下来安装watchman

brew install watchman

watchman是Facebook的一个文件观察者。React Native 用它来检测代码的变化.

接下来安装 npm

npm install -g react-native-cli

nmp 是 node的一个三方管理工具，至关于 Ruby中的RubyGems，iOS中的 CocoaPods，Java中的 Gradle/Maven，基本上，它使您可以轻松下载和管理你的项目须要的任何依赖库。

在终端，找到你但愿保存的项目文件，而后运行下面的文件夹。

react-native init BookSearch

以上使用 CLI 工具来构建一个 Native 项目，是准备创建并运行原样。当这个过程完成后，你就会在终端窗口中打开 Xcode 的BookSearch.xcodeproj 并运行应用程序像往常同样。作到这一点，模拟器将启动您的应用程序的运行。一个终端窗口也将打开。当一个Native应用程序启动时，它加载从如下网址 JavaScript 的应用程序。

http://localhost:8081/index.ios.bundle


终端被打开，服务器开始做出反应来处理上述请求。该 Native 负责读取和建设 JSX（咱们将看看这个版本）和 JavaScript 代码。

运行这个 APP,你能够看到下图中的模拟器，若是你想在开发运行有几个步骤，你应该这样作。

欢迎屏幕给出了一些关键的指令，你应该注意：编辑应用程序的用户界面，你应该修改，当你建立项目时生成的 index.ios.js 文件，若是您更改 JavaScript 代码，从新加载命令应用程序 Command-R 看到的变化，若是你想要更多的选择，使用命令控制 Command-Control-Z 打开开发者菜单，提供了这样的选项，使现场从新加载和浏览器的调试。

在任什么时候候作本教程时你可能会遇到一个红色屏幕模拟器，能够检查错误消息。它能让你知道这个问题是与你的代码仍是服务器有关系。当我接收到错误的消息「没法链接到服务器」 在模拟器和检查终端有一个「流程终止」 错误消息时我陷入了服务器链接问题。当这种状况发生时，关闭终端窗口，中止在 Xcode 中的应用并再次运行它。对于其余错误，是因为语法错误代码中或网络请求超时时（若是你的应用从互联网上获取数据），一个简单的从新加载后修复这个问题应该怎么作。

若是你在敦促 Command-R 键盘但什么都没有发生，硬件键盘可能没有链接到模拟器上。选择模拟器上的选项菜单以链接它：Hardware > Keyboard > Connect Hardware Keyboard.

若是你按上边程序作了它依然不能从新加载，那么你可能须要重启你的电脑。我遇到过一次忽然死机，重启电脑能够完成加载。

咱们如今开始构建应用程序，打开 index.ios.js 文件。我建议使用适合 web 开发的 IDE。你还可使用 Xcode，但你会发现它并不适合由于在代码格式化、自动完成和语法错误突出显示时它不是很是灵活。你能够经过学习本文来决定并选择合适的 JavaScript IDE。我用过 RudbyMine，但实际上任何 IDE 都支持 JavaScript。若是你能获得一个支持 JSX 的那真很不错。

当你打开 indx.ios.js 文件，你就会看到正在运行的应用程序构建 UI 的代码。你可能看到如下代码块。

'use strict'

以上代码启用了严格的模式，增长了处理原生 JavaScript 代码对错误的改善。

var React = require('react-native');

以上代码能够加载 react-native 模块，并将它赋予变量的反应。在你调用任何模块以前你须要把外部模块加载到你的文件中来。能够把它做为Swift 和 Objective-C 的导入库。

var { AppRegistry, StyleSheet, Text,
View,
} = React;

上面是一个解构赋值，你能够经过它将多个对象属性分配给一个变量。这能让他们在文件做用域被引用。以上是可选择的，但若是你不用它，那么每次你使用一个组件在你代码中时，你就必须使用彻底限定的名称，例如：「React.AppRegistry」而不能只用「AppRegistry」 、「React.StyleSheet」 而不能用「StyleSheet」 等等。

var BookSearch = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+Control+Z for dev menu
        </Text>
      </View>
    );
  }
});

上面建立一个类只有一个渲染 () 函数。在渲染函数中不管什么被定义都是将输出到屏幕上。上述使用 JSX（JavaScript语法扩展）来构建应用程序的 UI。若是您之前使用过 XML（甚至HTML），JSX 就会记住并熟悉你。它具备相同的均衡功能来打开和关闭标签并使用属性来设置值标签。你不须要使用 JSX 本地反应，你可使用纯 JavaScript，但 JSX 建议它的简单定义树结构。若是你有不少 UI 的代码，经过大型的 JSX 树结构将更容易阅读理解。

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

上面的样式应用可于视图的内容。若是你作过 web 开发或用过 CSS（层叠样式表），在此以前这应该是熟悉的。React Native 使用 CSS 样式应用程序的UI。若是你看看 JSX 代码，你会看到不一样风格的代码被用在不一样的地方。例如: style={style.container}设置样式定义容器的外部视图包含其余UI组件。

上面的样式应用可于视图的内容。若是你作过 web 开发或用过 CSS（层叠样式表），在此以前这应该是熟悉的。React Native 使用 CSS 样式应用程序的 UI。若是你看看 JSX 代码，你会看到不一样风格的代码被用在不一样的地方。例如: style={style.container}设置样式定义容器的外部视图包含其余 UI 组件。

（未完待续）

OneAPM Mobile Insight以真实用户体验为度量标准进行 Crash 分析，监控网络请求及网络错误，提高用户留存。访问 OneAPM 官方网站感觉更多应用性能优化体验，想阅读更多技术文章，请访问 OneAPM 官方技术博客。
本文转自 OneAPM 官方博客