SegmentFault

文

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

OneAPM蓝海讯通2015年08月11日发布

3推荐
56收藏，2.8k浏览

【编者按】本篇文章的作者是 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。

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 {styles.welcome}> Welcome to React Native! </Text> <{styles.instructions}> To get started,edit index.ios.js </{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: '#F5FCFF',},welcome: {
    fontSize: 20,textAlign: 10,instructions: {
    textAlign: '#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';

'react-native');

var {
    StyleSheet,Component
   } = React;

var styles = StyleSheet.create({
    description: {
        fontSize: 'white'
    },container: {
        flex: 'center'
    }
});

class Featured extends Component {
    render() {
        return (
       <{styles.description}> Featured Tab </View> ); } } module.exports = Featured;

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

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

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

class Search extends Component {
    render() {
        return (
        <{styles.description}> Search Tab </View> ); } } module.exports = Search;

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

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

'react-native');
var Featured = './Featured');
var Search = './Search');

var {
    AppRegistry,TabBarIOS,0)">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> <search'} {{uri:'search'}} {() => { 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工程师编译整理。想阅读更多技术文章，请访问 OneAPM官方博客。