React Native 简介：用 JavaScript 搭建 iOS 应用 (1)

React Native 简介：用 JavaScript 搭建 iOS 应用 (1)

我们已经了解像 Titanium 和 PhoneGap 等框架，它们能让开发者用 Web 技术构建移动应用。这是一个优势，支持开发者使用原先网络和移动开发的相关技术。不仅如此，相同的代码库经过小幅度的修改便能适用多个平台——这就是著名的「一次编写，到处运行」。然而，当涉及到构建应用的性能时，这些框架的缺点显露无遗，尽管它们有一些吸引力，但却一直更适用于构建原生应用。

开始吧！

首先，介绍一下在开发机器上安装 React Native 的流程。

我们选择使用 Homebrew 来安装 Node.js 框架。虽然这不是安装 Node 的唯一方式，但我发现，Homebrew 是非常好用的包管理器。你可以用它很容易地安装最新或特定版本的包、使用不同版本的软件包、选择要使用的版本、更新和卸载包等。想要安装 Homebrew，可以直接去官网，按照网页页面顶部指令即可。由于链接可能会变，这里就不贴出下载链接了。

在 Homebrew 安装好后，粘贴以下指令到终端窗口以安装 Node.js。

brew install node

接着安装 watchman。

brew install watchman

Watchman 是 Facebook 的文件监控器。React Native 用它来检测代码变化，以便重新编译。

接着用下列指令安装 React Native CLI 工具。

npm install -g react-native-cli

在终端窗口，切换到你想要保存项目的文件夹，然后运行以下命令。

react-native init BookSearch

以上是用 CLI 工具来构建一个可以编译和运行的 React Native 项目。当这个过程完成后，你会收到来自终端窗口的消息，在 Xcode 中打开 BookSearch.xcodeproj，并照常运行该应用程序。接下来模拟器将启动你的应用，此外，将再打开一个终端窗口。当一个 React Native 应用启动时，它将从以下网址加载 JavaScript 程序。

终端窗口打开后，会启动 React Packager，并由服务器处理以上请求。React Packager 负责读取并构建 JSX（之后会介绍）和 JavaScript 代码。

运行应用时，你会看到下图的模拟器。如果你要在设备上运行，应该按照以下几个步骤。

顺便说一句，你应该注意欢迎界面给出的关键指令：通过编辑创建项目时生成的 index.ios.js 文件，编辑应用的用户界面，如果你修改了 JavaScript 代码，用 Command-R 加载应用程序，看看有什么变化。如果你想要更多选择，使用 Command-Control-Z 打开开发者功能表，它提供启用时重新加载、浏览器调试等选项。

如果在键盘上按下 Command-R 没什么用，那么键盘可能没能连接到模拟器。从模拟器功能表中选择硬件>键盘>连接硬件键盘，便能成功连接。

如果你已经完成以上步骤，却仍没有重新加载，那么可能需要重新启动计算机。笔者曾经遇到过一次奇葩经历，项目运行一切正常，但却突然停止工作，重新启动后又恢复正常。

当打开 index.ios.js 文件时，你会发现这些代码构建的是执行应用时所看到的 UI。

'use strict';

上述代码开启了 Strict Mode，这将为 React Native 中的 JavaScript 代码加入了改良的错误处理能力。

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

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

以上代码被称作解构赋值，能够让你分配多个对象属性到一个单变量。使得这些属性可以在整个文件范围中引用。以上代码是可选的，但如果你省略不要，那么每当你在代码中使用一个组件时，你必须使用其完整名称，例如「React.AppRegistry」、「React.StyleSheet」而不是 「AppRegistry」、「StyleSheet」。

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

上面代码创建了只有单一函数 render()的类。无论 render 中定义了什么，都将被输出到屏幕。上述代码使用 JSX（JavaScript 语法扩展）来构建应用的用户界面。如果你之前已经使用 XML（甚至 HTML），那么对 JSX 应该不陌生。它同样需要使用开始、结束标记，在标记中使用属性来设置数值。React Native 不必非得使用 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, },});

以上代码是应用于视图内容的样式。如果你以前做过网络开发，而且使用过 CSS（层叠样式表），那么这应该很熟悉。React Native 使用 CSS 设定应用的用户界面。再看一眼 JSX 代码，你会发现每个样式都各有用途，例如 style={} styles.container 为容器定义样式，容器是用来容纳其他 UI 组件的外部视图。

AppRegistry.registerComponent('BookSearch', () => BookSearch);

上行代码定义了应用的入口。也就是 JavaScript 代码开始执行的地方。

这是 React Native 用户界面的基础结构。每个定义的视图将会遵循这一基础结构。

添加标签栏

示例应用将有两个项目的标签栏——精选和搜索。我们首先添加该功能。

虽然你可以在 index.ios.js 中编写所有代码，但这种做法并不推荐，随着应用代码量的增加，整个框架容易变得混乱不堪。为了更便于管理，我们在不同的文件中创建类。

在项目中根目录中创建两个 JavaScript 文件（与 index.ios.js 文件在相同位置）。命名这两个文件为 Search.js 和 Featured.js。打开 Featured.js 并添加以下代码。

'use strict';  var React = require('react-native');  var {     StyleSheet,    View,    Text,    Component   } = React; var styles = StyleSheet.create({     description: {        fontSize: 20,        backgroundColor: 'white'    },    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center'    }}); class Featured extends Component {     render() {        return (                          Featured Tab                    );    }} module.exports = Featured;

在样式表定义中，我们可以看到基本的 CSS 属性。我们为外部视图中的文本和中心内容，设置字体大小和背景颜色。但你可能不熟悉 flex: 1 这行，这是最近才增加到 CSS 规范中的 flexbox。这里的 flex: 1 使得标记为容器的元素只占用的屏幕中的剩余空间，也就是只占用适应其内容的足够空间。之后我们会进一步介绍 Flex。要了解更多关于 Flexbox 样式，你可以参考这个指南。

在 Search.js 中添加下面代码。

'use strict';var React = require('react-native');var { StyleSheet, View, Text, Component } = React;var styles = StyleSheet.create({ description: { fontSize: 20, backgroundColor: 'white' }, container: { flex: 1, justifyContent: 'center', alignItems: 'center' }});class Search extends Component { render() { return ( Search Tab ); }}module.exports = Search;

上面的代码与 Featured.js 的代码很像，除了文本控件中的文字。

删除 index.ios.js 中的所有内容，将下面的代码粘贴进去。

'use strict';var React = require('react-native'); var Featured = require('./Featured'); var Search = require('./Search');var { AppRegistry, TabBarIOS, Component } = React;class BookSearch extends Component { constructor(props) { super(props); this.state = { selectedTab: 'featured' }; } render() { return ( { this.setState({ selectedTab: 'featured' }); }}> { this.setState({ selectedTab: 'search' }); }}>