【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人，毕业于台湾大学，近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中，作者介绍通过 React Native 框架构建一个示例应用的开发过程，使得网络技术和移动开发碰撞出绚丽火花，本文系 OneAPM 工程师编译整理：

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

React Native 却与众不同。像 PhoneGap 这样的框架是将网页内容包装成 WebView，导致 UI 元素并没有原生的感觉，而 React Native 则使用原生 iOS 或 Android 组件支持的 JavaScript 组件，所以你构建的应用是完全原生的。

Facebook 的汤姆 Occhino 在文章末尾链接视频中说，React Native 并非是「一次编写，到处运行」的框架。正如本教程所介绍，你使用特定平台的组件来构造 UI，所以并不能直接将同样的代码放到 Android 上运行。React Native 是让你学习这套技能，并可以用它在多种平台上搭建应用，Occhino 更进一步阐明，这其实是「一次编写，到处运行」的框架。在本文中，作者将介绍利用 React Native 框架构建一个简单应用的完整开发过程。

## 开始吧！

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

开始之前，应该提醒大家：你可以从 GitHub 获取 React Native 框架代码。接着运行其中的示例项目，比如 2048（游戏）、Movies（电影浏览器应用）、SampleApp（空白的 React Native 应用）、TicTacToe（游戏）和 UIExplorer（这个应用展现了所有可能用到的 React Native 组件，比如 ListView、TabBar、MapView、Slider 等）。这些应用能帮助你学习使用 React Native 构建 UI 元素，尤其是 UIExplorer 应用程序，它提供了你可能需要用到的每个 UI 元素。但是，有些应用程序还有 Bug，笔者在尝试运行时也出现过几次崩溃。尽管如此，它们仍然非常值得学习，如需详情，你可以了解下相关文档。

现在开始安装。React native 利用 Node.js 来搭建 JavaScript 代码。如果你电脑上已经安装过，则可以跳过以下步骤，否则请继续以下步骤。

我们选择使用 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

NPM 是 Node 的包管理器。你可以将它想象成 Ruby 中的 RubyGems、iOS 的 CocoaPods，以及 Java 中的 Gradle/Maven 等。它能够让你更容易地下载和管理项目所需的任何相关项。

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

react-native init BookSearch

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

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

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

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

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

当你按照本文操作，模拟器上却突然出现一个红色屏幕时，不妨检查一下模拟器上的错误消息。通过检查可以排查出问题是出自代码还是服务器。作者也曾经遇到几次服务器连接失败的情况，由模拟器反馈的错误消息是「无法连接到服务器」，然而检查终端时得到「进程终止」的错误消息。面对这种情况时，需要关闭终端窗口，停止在 Xcode 上的应用，并重新运行。对于其他错误比如代码中的语法错误、网络请求超时错误（如果你的应用是从网络获取数据），在修正错误后再重新加载应该就可以了。

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

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

现在开始构建我们的应用。打开 index.ios.js 文件。作者推荐使用适用于 Web 开发的 IDE。当然你也可以使用 Xcode，但不久你会发现它并不是很适合。当你需要代码格式化时，它的用处不大，无法自动填充或语法错误高亮。对于适合的 JavaScriptIDE，你可以通读本文后再做决定。我用的是 RubyMine，事实上只要是支持 JavaScript 的任何 IDE 都行，如果你选择一个还能支持 JSX 的那会更好。

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

'use strict';

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

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

上述代码载入 react-native 模块，并将其分配给 React 变量。在你可以调用模块的所有功能之前，必须加载外部模块到项目文件。就像在 Swift 和 Objective-C 中导入库。

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

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

上面代码创建了只有单一函数 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 用户界面的基础结构。每个定义的视图将会遵循这一基础结构。

在本篇文章中，我们将创建一个示例应用，可以浏览书籍，并看到详细信息比如作者、标题、该书简介。你也可以在应用中搜索书名和作者。下图是该应用的成品图，数据用的是 Google 书籍 API。

## 添加标签栏

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

虽然你可以在 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 (
       <View style={styles.container}>
        <Text style={styles.description}>
           Featured Tab
        </Text>
    </View>
        );
    }
}

module.exports = Featured;

这段代码你应该非常熟悉，非常类似于我们前面的代码。我们设置 Strict Mode、加载 react-native 模块、创建视图样式并用 render() 函数渲染输出到用户界面。代码的最后一行输出精选类，从而使其可用于其他文件。请注意，我们声明类和函数的方式，略微不同于示例 inindex.ios.js 文件。JavaScript 有不同的声明类和函数的方式。随意选择你喜欢的风格。本篇文章接下来，我们将一直沿用上面所使用的样式。

在样式表定义中，我们可以看到基本的 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 (
        <View style={styles.container}>
            <Text style={styles.description}>
              Search Tab
            </Text>
        </View>
        );
    }
}

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 (
            <TabBarIOS selectedTab={this.state.selectedTab}>
                <TabBarIOS.Item
                    selected={this.state.selectedTab === 'featured'}
                    icon={{uri:'featured'}}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'featured'
                        });
                    }}>
                    <Featured/>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    selected={this.state.selectedTab === 'search'}
                    icon={{uri:'search'}}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'search'
                        });
                    }}>
                    <Search/>
                </TabBarIOS.Item>
            </TabBarIOS>
        );
    }
}

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

此时，我们需要之前创建文件中导出的两个模块，并将它们分配给变量。在类中，我们指定一个构造函数，用来设置类的状态。所使用的组件均有状态变量，然后创建一个名为 selectedTab 的属性，并将其值赋给「featured」。我们将利用「featured」来确定选项卡是否有效。最后为 Featured 标签设定默认值。(未完待续...)

敬请持续关注：《React Native 简介：用 JavaScript 搭建 iOS 应用》系列 (2)(3).

原文地址：http://www.appcoda.com/react-native-introduction/

OneAPM 是应用性能管理领域的新兴领军企业，能帮助企业用户和开发者轻松实现：缓慢的程序代码和 SQL 语句的实时抓取。想阅读更多技术文章，请访问 OneAPM 官方博客。