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

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

React Native 简介:用 JavaScript 搭建 iOS 应用 (1) 技术分享 第1张

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 代码。

React Native 简介:用 JavaScript 搭建 iOS 应用 (1) 技术分享 第2张

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

React Native 简介:用 JavaScript 搭建 iOS 应用 (1) 技术分享 第3张

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

React Native 简介:用 JavaScript 搭建 iOS 应用 (1) 技术分享 第4张

当你按照本文操作,模拟器上却突然出现一个红色屏幕时,不妨检查一下模拟器上的错误消息。通过检查可以排查出问题是出自代码还是服务器。作者也曾经遇到几次服务器连接失败的情况,由模拟器反馈的错误消息是「无法连接到服务器」,然而检查终端时得到「进程终止」的错误消息。面对这种情况时,需要关闭终端窗口,停止在 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。

React Native 简介:用 JavaScript 搭建 iOS 应用 (1) 技术分享 第5张

添加标签栏

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

虽然你可以在 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)

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

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