ReactNative-IOS-开发教程-全-

ReactNative IOS 开发教程（全）

原文：React native for iOS development

协议：CC BY-NC-SA 4.0

一、学习基础：React 的短暂停留之旅

“千里之行始于足下。”—老子

在开始 React Native 之旅之前，您必须对 React(也称为 ReactJS 或 React.js)有所了解。在本章中，您将快速了解 React 的核心概念，这将有助于您使用 React Native。React 不同于大多数流行的 web 技术，随着本章的深入，您将会了解其中的原因。如果你已经花了相当多的时间在传统框架上，它的核心概念将会真正打开你的思维方式；这种新的思维方式有时被称为 React 式思维方式。您可能听说过“一次编写，随处运行”这句话，但由于各种形式(web、移动设备、平板电脑)的激增，您认为这几乎是不可能的。React 有一个不同的指导原则:“学习一次，在任何地方写作。”哇，那看起来很不一样，很自由。因此，您将从快速浏览 React 开始第一章，这将帮助您为 React Native 做好准备。如果你对 React 有初步的了解，你可以跳过这一章，进入第二章。

React 是一个用于创建用户界面的 JavaScript 库。它是由脸书和 Instagram 团队共同努力打造的。React 于 2013 年首次向世界推出，并在社区范围内获得了广泛认可，并受益于作为脸书核心技术的优势。根据官方文档，有些人认为 React Native 是 MVC 中的 V，因为 React Native 对所使用的其他技术栈没有任何假设。你可以使用任何你想要的技术，你可以用 React Native 创建你的应用的一个单独的部分；您也可以方便地在已经创建的应用中进行更改。

为什么要 React？

但是在一个充满 js 库和框架的世界里，我们还需要另一个 JavaScript 库吗？几乎每个月都会引入新的 js 框架。

React 的出现是因为它的创造者面临着一个重大问题:如何构建数据频繁变化的大型应用。这个问题几乎出现在任何现实世界的应用中，React 就是为了解决这个问题而诞生的。众所周知，许多流行的框架都是 MVC 或 MV框架，但这里有一点需要注意和重申:React 不是 MV框架。这只是一个为数据随时间变化的 UI 组件构建可组合用户界面的库。与流行的 js 框架不同，React 不使用模板或 HTML 指令。React 通过将 UI 分成许多组件来构建用户界面。就这样，没别的了。这意味着 React 使用编程语言的全部功能来构建和呈现视图。

以下是为您的下一个项目选择 React 的一些优势:

React 广泛使用 JavaScript:传统上，HTML 中的视图与 JavaScript 中的功能是分开的。有了 React，组件就创建好了，而且有一个完整的部分，JavaScript 对 HTML 了如指掌。
可扩展和可维护:组件由一个统一的标记及其视图逻辑组成，这实际上使 UI 易于扩展和维护。
虚拟 DOM: React 应用正在飞速发展。这归功于虚拟 DOM 及其差分算法。
单向数据流:双向数据绑定是一个很好的想法，但是在现实世界的应用中，它产生的痛苦多于好处。双向数据绑定的一个常见缺点是，您不知道数据是如何更新的。有了单向数据流，事情就简单了:你知道数据在哪里发生了变化，这使得维护和测试你的应用变得更加容易。

为了对一项新技术有一个坚实的基础，有必要了解它的核心概念。在下一节中，您将探索 React 的一些独特概念，这将使您更进一步了解这项令人惊叹的技术。

虚拟 DOM

在所有 web 应用中，应用遭受的最昂贵的操作之一是改变 DOM。为了解决这个问题，React 维护了一个 DOM 的虚拟表示(如图 1-1 所示)，它被称为虚拟 DOM 或 VDOM。除了差分算法，React Native 还能够计算实际 DOM 的增量，并只更新 DOM 中发生变化的部分。因此，更改的数量较少，这导致应用非常快。在应用的开始阶段，你可能看不到它，但是随着你的项目膨胀到疯狂的复杂程度(这通常发生在现实世界的应用中)，你将开始看到用户快速体验的好处。

图 1-1。

Virtual DOM and diffing algorithm operations

手动 DOM 操作很麻烦，并且很难跟踪 DOM 以前的状态。如图 1-1 所示，React 通过保留一个虚拟 DOM 的两个副本来解决这个问题。接下来，对这两个虚拟 DOM 应用一个不同的算法，该算法主要检查发生的更改并返回 DOM 操作流。这些 DOM 操作然后被应用到实际的浏览器 DOM。

现在让我们从组件的角度来理解虚拟 DOM 是如何工作的。在 React 中，每个组件都有一个状态；这种状态是可以观察到的。每当状态发生变化时，React 基本上都知道这种变化需要重新渲染。所以当应用状态改变时，它会生成一个新的 VTreediff 算法再次共享了所需更改的 DOM 路径，如图 1-2 所示。这使得手动 DOM 操作最少。

图 1-2。

Components with virtual DOM

虚拟 DOM 的这个特性不仅重要，而且是 React 的杀手锏。DOM 访问速度非常慢，谦虚地说，在大多数应用中一次又一次地访问 DOM 使得情况变得更糟。为了让你的应用运行得更快，你应该尽可能少的接触 DOM，而虚拟 DOM 的实现很好的处理了这一点。对于一个小而琐碎的应用，您不会注意到这一点，但是一旦您的应用增长到有数千个 DOM 元素都试图更新，React 将不会让您的性能受到影响。

单向数据流

React 主要是 MVC 模式中的 V，但是在深入 React 中单向数据流的概念之前，您必须理解 MVC 框架的挑战。MVC 框架的最大挑战之一是管理视图。如您所知，MVC 框架的视图组件主要是 DOM 表示。当您编写与 DOM 交互的代码时，这很简单，但是对于框架来说，处理各种 DOM 操作是非常复杂的。

传统的 MVC 视图通常包含许多繁重的 UI，当数据发生变化时，即使是很小的元素，最终也会重新呈现应用，循环继续。这是因为通常大多数 MVC 框架都遵循双向数据绑定(见图 1-3 )。

图 1-3。

Two-way data binding

在 JavaScript 中，数据在内存中更改，并且绑定到 UI 中的一个视图，这意味着当在内存中的 JavaScript 中修改数据时，UI 中的数据也会更改。反过来，当 UI(即 DOM)中的数据通过单击按钮或任何其他事件发生变化时，它也会在内存中得到更新，从而使二者保持同步。理论上，这是完美的，这个想法是浪漫的完美。然而，在现实世界的应用中，当您有一个相当复杂和大的应用，用多个视图表示您的一个模型中的数据时，问题就出现了。随着您添加更多的模型和更多的视图，这种双向数据绑定最终会像意大利面条一样，将数据的每次更改添加到锅里，有时甚至会导致无限事件循环，其中一个视图更新一个模型，而模型又更新一个视图，以此类推，如图 1-4 所示。

图 1-4。

Unwanted spaghetti relationship

这个系统的另一个问题是做出改变的代价非常高。当你向一个新开发人员介绍一个如此复杂的应用时，很难理解一个变化可能会在这种错综复杂的关系中造成的影响。

React 遵循单向数据流以保持简单，如图 1-5 所示。它基于关注点分离(SoC)的概念。这是计算机科学中的一个设计原则，其中一个应用或程序被分成不同的部分，每个部分解决一个单独的或特定的问题。这种设计原则的价值在于，它简化了开发，创建了可维护和可伸缩的应用。这导致了模块化的代码，其中一个单独的部分可以被独立地重用、开发和修改。这很有意义，确实是聪明思维的一个例子。

图 1-5。

React Native’s one-way data flow

安装和设置

为了理解实际的例子，您必须首先设置您的环境来运行您的 React 例子。开始使用 React 最简单的方法是使用 JSFiddle 示例。

React JSFiddle 与 JSX(你很快就会了解到 JSX):https://jsfiddle.net/reactjs/69z2wepo/
React JSFiddle: https://jsfiddle.net/reactjs/5vjqabv3/

另一种方法是下载完整的初学者工具包甚至离线工作: http://facebook.github.io/react/downloads/react-0.13.3.zip

您也可以使用 npm: npm install -g react-tools安装 react-tools。

使用 React Native 提高工作效率的另一个有用工具是 React Developer Tools，这是一个非常有用的 Chrome 扩展，允许您在 Chrome 浏览器中检查 React 组件层次结构:

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

为了方便起见，您将在本章的示例中使用以下设置:React Native 和 JSX transformer 的脸书 cdn。

react . js:fb.me/react-0.13.3.js

JSX 变压器: http://fb.me/JSXTransformer-0.13.3.js

只需在代码中引用它们。接下来，您将安装节点包 browserify、watchify 和 babelify，这将帮助您转换 JSX 并将其保存在适当的 js 文件中:

s$ npm install react browserify watchify babelify --save-dev

$ watchify –t babelify ./your-jsx-file.jsx –o ./final-js-file.js –v

太好了！要为应用提供服务，您将通过以下命令在项目文件夹的根目录中使用简单的 python 服务器(SimpleHTTPServer ):

$ python -m SimpleHTTPServer

默认情况下，简单 python 服务器将在 8000 端口上为您的示例提供服务。

现在您已经完成了设置，您可以很快开始理解 React 的概念。

组件介绍

React 是关于组件的。您在 React 中做的任何事情都是基于可重用组件的。换句话说，使用 React 你只做一件事，那就是构建组件。在前面的章节中，我们讨论了关注点的分离。这些组件的整个概念是它们被完全封装，使它们易于测试和重用。

创建可重用组件是一项艺术工作，React Native 为您提供了许多特性。您将很快深入研究它们，但是首先让我们创建一个简单的“Hello World”组件。

创建一个hello_world.html文件，并将以下代码粘贴到其中:

<!DOCTYPE html>

<html>

<head>

<script src="http://fb.me/react-0.13.3.js

<script src="http://fb.me/JSXTransformer-0.13.3.js

</head>

<body>

<div id="intro"></div>

<script type="text/jsx">

React.render(

<h1>Hello, world </h1>, document.getElementById('intro')

);

</script>

</body>

</html>

这很简单。您的代码驻留在 HTML 标记中。JavaScript 驻留在脚本标签中。我们确实在类型'text/jsx'中看到了一些不同的东西；这就是 JSX，我们将在接下来的章节中详细解释。我们还看到一个关键字“React ”,这是 React 库的入口点。其中有包含所需文本的 H1 标签，以及文本出现的目标(在本例中为document.getElementById(intro))。此外，这个 React 代码可以存在于一个单独的文件中，并且可以在 HTML 中被引用。让我们创建一个名为src/helloworld.js.的单独文件

React.render(

<h1>Hello, world </h1>,

document.getElementById(“intro”)

);

现在让我们在您的hello_world.html file:中引用它

<script type="text/jsx" src="src/hello-world.js"></script>

这很简单。但是什么是 JSX 呢？在我们全面了解组件的不同方面之前，让我们先来看看 JSX。

小艾

React 不要求您使用 JSX。然而，JSX 确实让生活变得更简单。其类似 XML 的语法有助于非常容易地定义带有属性的树结构。XML 有很多好处，比如平衡开放标签和封闭标签。这使得大树比函数调用或对象文字更容易阅读。

让我们看一个简单的例子，先不看 JSX，看看随着我们逐渐包括 JSX，事情是如何变得简单的。

<!DOCTYPE HTML>

<html lang='en'>

<head>

<meta charset="UTF-8">

<title>Example without JSX</title>

<script src="http://fb.me/react-0.13.3.js

</head>

<body>

<script >

var Appo = React.createClass({

render:function(){

return React.createElement("h1",null, "Hello Dear")

}

});

React.render(React.createElement(Appo), document.body);

</script>

</body>

</html>

在本例中，您使用了React.createElement。您首先传递一个表示 HTML 标记的字符串，第二个是您的属性，第三个是子元素，在本例中是内部 HTML。

接下来，您希望在React.render中呈现您的组件，因此您传递应用组件，并将其作为document.body加载到目标位置。输出类似于图 1-6 。

图 1-6。

Output in React.render

接下来，我们再来看一个方法，这个方法已经被弃用，不再使用了。(React 生态系统发展如此之快，以至于有些东西已经被弃用了；然而，回顾一下过去，就会发现在如此短的时间内，他们在使事情变得更容易方面取得了多大的进展。)

<!DOCTYPE HTML>

<html lang='en'>

<head>

<meta charset="UTF-8">

<title>Old world example</title>

<script src="http://fb.me/react-0.13.3.js

</head>

<body>

<script>

var Appo = React.createClass({

render:function(){

return React.DOM.h1(null, "Hello Past")

}

});

React.render(Appo(), document.body);

</script>

</body>

</html>

这个例子使用了React.DOM模式，其中指定了要使用的标签(在这个例子中是 h1)；第一个参数是属性，第二个是字符串，用作内部 HTML。当使用React.render呈现时，您将组件函数和目标传递到它要被加载的地方(在本例中是文档体)。如果你有 React 的最新版本，你会在你的控制台得到如图 1-7 所示的警告和错误。

图 1-7。

DevTools will show this warning

访问 http://fb.me/react-legacyfactory 找到除了 JSX 调用工厂之外的另一种方法，在调用组件之前包装组件。这也提醒你是时候使用 JSX 了。

现在让我们看看使用 JSX 时，同一个示例是什么样子的(另见图 1-8 ):

图 1-8。

Output using JSX

<!DOCTYPE HTML>

<html lang='en'>

<head>

<meta charset="UTF-8">

<title>JSX me like !</title>

<script src="http://fb.me/react-0.13.3.js

<script src="http://fb.me/JSXTransformer-0.13.3.js

</head>

<body>

<script type="text/jsx">

var App = React.createClass({

render:function(){

return <h1>Hi from JSX</h1>

}

});

React.render(<App />, document.body);

</script>

</body>

</html>

在这里，我们已经包括 JSX 变压器，浏览器内的变压器。你的组件应用有 h1 标签。接下来，您使用React.render呈现它，以 JSX 语法传递您的组件，并将第二个参数作为目标，即document.body。就这样。

现在将您的 JSX 代码分离到一个单独的JSX文件中，并将其转换成纯 JavaScript，看看会发生什么。为此，让我们创建一个名为src的文件夹，并将您的 JSX 代码放入hello.jsx文件中:

var Appo = React.createClass({

render:function(){

return React.DOM.h1(null, "Hello Past")

}

});

React.render(Appo(), document.body);

接下来，让我们添加一个dist文件夹，您可以在其中保存转换后的 js 文件示例bundle.js。之后，在 HTML 文件中引用您的bundle.js文件(在本例中是jsx_example.html)。

如前所述，您应该安装节点包 browserify、babelify 和 watchify，以便使用它们将您的 JSX 转换成 js。这可以使用以下命令来完成:

$ npm install react browserify watchify babelify --save-dev

现在，用下面的命令将您的hello.jsx转换成bundle.js:

$ watchify –t babelify ./src/hello.jsx –o ./dist/bundle.js –v

结果是下面的bundle.js文件:

var Appo = React.createClass({

displayName: "Appo",

render: function render() {

return React.DOM.h1(null, "Hello Past");

}

});

React.render(Appo(), document.body);

尽管 React 并不明确要求 JSX，但它是首选。它允许您使用 HTML 语法创建 JavaScript 对象。组件有两个用途:模板和显示逻辑。因此，标记和代码紧密地联系在一起。显示逻辑通常非常复杂，使用模板语言来表达它确实变得很困难。解决这个问题的最好方法是从 JavaScript 本身生成 HTML 和组件。JSX 通过创建 React 树节点，用其 HTML 类型的语法解决了这些问题。

为了更好的可维护性，您可以保持 JSX 源代码的完整性；把它放在 JSX 档案的独立文件夹里。要将 JSX 代码转换成普通的 JavaScript，可以手动或通过构建脚本使用 JSX 编译器( http://facebook.github.io/react/jsx-compiler.html )。在您的生产环境中提供 JSX 文件是可能的，但是 React 将向您提供有关性能降低的控制台通知。

深入了解组件

在下一节中，您将探索组件的重要概念，这将帮助您轻松地使用它们。

性能

React 有些类似于 HTML 中的属性:properties。您可以使用它们来初始化您的组件，就像这样:

React.render(<App myProp="Hi from prop" />, document.getElementById('container'))

这里你用一个名为myProp的属性初始化 App 组件，这个属性的目标是'container'的 id。您可以通过以下方式在 JSX 通过插值访问此属性。让我们创建一个组件应用:

var App = React.createClass({

render: function(){

var txt = this.props.txt

return (

<div>

<h1> {myProp} </h1>

</div>

);

}

});

React.render(<App myProp="Hi from prop" />, document.getElementById('container'))

如果刷新浏览器，您将看到来自内部 HTML 的属性的消息。请为您的 HTML 文件使用以下代码(结果如图 1-9 所示):

图 1-9。

Refreshing your browser produces this message

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div id="container"></div>

</body>

<script src="http://fb.me/react-0.13.3.js

<script src="http://fb.me/JSXTransformer-0.13.3.js

<script src="dist/bundle.js"></script>

</html>

随着应用的增长，您首先需要确保组件是正确创建的。对于属性，您可以用一系列验证器来指定一种属性。这确保并验证了接收到的数据类型。让我们用一个例子来看看其中的一些:

var App = React.createClass({

propTypes: {

message: React.PropTypes.string,

age: React.PropTypes.number

},

render: function(){

// keeping props in a variable to use to often

var message = this.props.message,

age = this.props.age

return (

<div>

<h1> {message} </h1>

<p> My age is {age}</p>

</div>

);

}

});

React.render(<App age={5} message="Hi from prop" />, document.getElementById('container'))

这里，propType关键字表示属性名及其类型的散列。在您的示例中有两个 prop type:string和number，分别对应于message和age属性。

还有许多其他的财产类型。请注意，您可以将isRequired添加到任何 propType 的末尾，使其成为必需的:

propTypes: {

//some specific JS primitive

arrayType: React.PropTypes.array,

boolType: React.PropTypes.bool,

funcType: React.PropTypes.func,

objectType: React.PropTypes.object,

//if a value of a prop is necessary

numberType: React.PropTypes.number.isRequired

}

通过关键字getDefaultProps在属性中也有一个默认类型。例如，在同一个组件中，您可以为您的message和age属性指定默认类型:

getDefaultProps: function(){

return {

message: 'Default value of message',

age: 0

}

},

状态

在上一节中，您了解了属性，这些属性是传递到组件中的静态值。另一方面，状态由组件维护和更新。让我们用一个例子来理解这个概念:

var App = React.createClass({

getInitialState: function(){

return {

message: 'this is a default message from state',

}

},

render: function(){

return (

<div>

<h1> {this.state.message} </h1>

</div>

);

}

});

React.render(<App />, document.getElementById('container'))

如果您运行这个代码片段，您将在浏览器中看到如图 1-10 所示的结果。

图 1-10。

Resulting message using state

让我们看看代码。在同一个组件中，您使用关键字getInitialState初始化状态，在这个关键字中，您设置了消息的初始状态:

getInitialState: function(){

return {

message: 'this is a default message from state',

}

},

接下来，与上一个例子不同，您使用this.state.message来访问这个状态，它打印消息状态的初始文本:

<div>

<h1> {this.state.message} </h1>

</div>

现在让我们为您的组件添加一些功能。您在消息语句上方添加一个文本框。当您在文本框中键入内容时，消息会使用状态的概念实时更新:

var App = React.createClass({

getInitialState: function(){

return {

message: 'this is a default message from state',

}

},

updateState: function(e){

this.setState({message: e.target.value})

},

render: function(){

return (

<div>

<input type="text" onChange={this.updateState} />

<h1> {this.state.message} </h1>

</div>

);

}

});

React.render(<App />, document.getElementById('container'))

如果您在浏览器中执行这段代码，您将会看到如图 1-11 所示的结果。

图 1-11。

Adding a text box above your message statement

让我们看看您向组件中添加了什么。首先，您引入了一个名为updateState的函数:

updateState: function(e){

this.setState({message: e.target.value})

}

这个新函数updateState接受一个名为(e)的事件，并更新消息状态的值。此外，您还添加了一个输入字段:

<div>

<input type="text" onChange={this.updateState} />

<h1> {this.state.message} </h1>

</div>

输入框有一个onChange事件，每当状态更新时，它调用您的定制方法updateState。当您在文本框中键入内容时，打印的信息会立即更新。

摘要

本章提供了 React 的快速浏览。在你开始下一章之前，让我们回顾一下到目前为止你所学的内容。向您介绍了 React 库及其发明背后的原因。然后，您学习了如何安装和设置 React。您学习了这项技术的基础，例如虚拟 DOM、单向数据流和 JSX。您还了解了组件，以及在组件中使用状态和属性。

现在，您已经准备好在 React 生态系统中编码和工作，您旅程的有趣路径将在下一章开始。您将开始使用 React Native。

二、最简单的程序：React Native 的 Hello World

“大事始于小事。”—普罗米修斯

在上一章中，您对 React 生态系统有了一个很好的概述。现在是时候用 React Native 弄脏你的手了。在本章中，您将通过安装先决条件来设置您的环境，然后您将创建您的第一个 React 本机应用。

最好的学习方法是通过实例。贯穿整本书的主题是，你将通过编程来跟随例子学习 React Native 以理解概念。

在本章中，您将探索以下主题:

React Native 简介
React Native 的要点
React Native 的安装
你的第一份申请
React 本机应用的剖析
如何调试您的应用

Note

您可能会面临不同项目在不同节点版本上工作的情况。因此，建议您安装 NVM(节点版本管理器)来帮助保持可以在项目之间切换的多个节点版本。

什么是 React Native？

React Native 是一个开发原生移动应用的开源平台；它主要是由脸书的一个团队开发的。使用 React Native 很酷的一点是，您的程序使用标准的 web 技术，如 JavaScript (JSX)、CSS 和 HTML，而您的应用是完全原生的。换句话说，您的应用非常快速和流畅，它等同于任何使用传统 iOS 技术(如 Objective-C 和 Swift)构建的原生应用。然而，React Native 在性能和整体体验方面并没有妥协，就像流行的使用 web 技术构建 iOS 应用的混合框架一样。

React Native 旨在将 React 的强大功能引入移动开发，这一点在第一章的中有所解释。用 React 团队的话说，“学习一次，在任何地方写。”使用 React 和 React Native，您将看到许多使用 React 为 Web 构建的组件可以很容易地移植到 React Native iOS 应用，只需很少或不需要修改。React Native 引入了一种高度功能化的方法来构造用户界面，这与传统的 iOS 开发方法有很大不同。

尽管 React Native 是由脸书开发者开发的，但它是一个开源项目。该代码可在 https://github.com/facebook/reactreact-native 获得。

React 本地先决条件

在开始安装之前，让我们先回顾一下 React Native 的先决条件:

iOS 应用只能在安装了 OSX 的苹果 Mac 电脑上开发。您需要 OSX 版本 10.10 或以上。
您需要 Xcode 6 或更高版本，其中包括 iOS SDK 和模拟器。React Native 仅支持 iOS7 或以上版本。Xcode 可以从苹果 App Store 下载。
如果你注册了苹果 iOS 开发者计划，这是很有帮助的。如果您不在 iOS 开发者计划中，您将无法
- 在实际设备上测试应用。
- 访问测试版操作系统。
- beta 测试的试飞。
- 将您的应用提交到 App Store。

装置

让我们对 React Native 做一个快速的一次性设置。React Native 是 JavaScript 和 Objective-C 代码的混合体，因此您需要一些工具来创建、运行和调试用 JavaScript 编写的本机应用。我们一个一个来。

安装节点和 npm

Node.js 是建立在 Chrome 的 JavaScript 运行时之上的开源平台；它提供了一种轻松构建快速、可伸缩程序的方法。Node.js 允许您在终端中运行 JavaScript，并帮助创建模块。通过在终端中运行以下命令来安装 node . js:$brew install node。

自制是安装 Node 的推荐方式。也可以从 https://nodejs.org 下载安装程序，手动安装。

npm 是 Node.js 的包管理器，如果你来自 iOS 世界，它类似于 CocoaPods。

通过在终端中运行以下命令来检查节点安装:

>> node –v

v4.2.1

>> npm –v

2.13.1

安装 Watchman

当您的文件和记录发生变化时，Watchman 会观察它们。当匹配文件更改时，它还可以触发操作(如重建资源)。更多详情，请访问 https://facebook.github.io/watchman/ 。

您可以通过运行以下命令来安装 Watchman:

$brew install watchman

安装 React 本地包

React Native 是一个 npm 包，所以使用下面的代码来安装React Native- cli模块:

npm install -g react-native-cli

更新 React 本机

React Native 和 iOS 都是快速移动的框架。建议每次有新版本时更新它们。升级 React Native 很简单。在终端中运行以下命令:

npm update -g react-native-cli

你的第一个应用

既然您已经对 React Native 有了足够的了解，并且已经设置好了系统，那么是时候创建您的第一个应用了。为了让事情变得简单，开始的时候跟着做就行了。有时，单调地输入代码可能会让你感到与现实脱节，但现在跟着感觉走就足够了。记住模仿是一种强有力的学习形式；这是我们学习大部分技能的方式，比如说说话、阅读、写作，也是你学习 React Native 编程的方式。随着您的继续，这种方法将帮助您深入理解为什么您创作了某些代码。

在整本书中，你将创建一个应用，并把它从 Hello World 变成一个成熟的、发行级的应用，除了在某些地方我们需要脱离主题去独立探索一个概念。所以在你设置之前，先说一下你打算解决的问题。你将在本书过程中创建的应用计划解决一些住房问题；这将是任何流行的房地产搜索应用的一个非常原始的版本。

我们称之为合租吧。它将有一些基本的功能，如列表，创建一个条目，地理定位一个属性，等等。随着操作的进行，您将会看到各种 React 本机特性如何适合您的应用。

那是相当多的，但是在这一章中，你将仅仅使用 React Native 和一些 Hello World 代码为你的项目创建基本的结构。

创建一个基本的骨架

启动终端并键入以下命令:

react-native init HouseShare

这段代码使用 CLI 工具构建一个 React 本机项目，该项目可以按原样构建和运行。该命令为 React 本地 iOS 项目创建基本的文件夹结构。接下来，让我们进入这个目录:

> cd HouseShare/ios/

现在，点击HouseShare.xcodeproj。这是一个 Xcode 项目文件，将在 Xcode 中打开您的项目。接下来，让我们在 iOS 模拟器中加载您的应用。要构建您的应用并将其加载到模拟器中，只需单击顶部的运行按钮(图 2-1 )或执行 Command + R。这将在 iOS 模拟器中编译、构建并启动您的项目(图 2-2 )。

图 2-2。

Using the iOS simulator

图 2-1。

Building by clicking the Run button

真的很快。由于一个简单的命令，您的项目的基本结构已经就绪，您的应用已经加载到模拟器中。另请注意，当您从 Xcode 运行应用时,“终端”会自动打开。这是 React Native 的节点包管理器。如果您取消此操作，应用将停止工作。

终端打开，启动 React 原生打包器和一个服务器处理上述请求(图 2-3 )。React 本机打包程序负责读取和构建 JSX(您将在后面看到)和 JavaScript 代码。

图 2-3。

The packager is ready

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

Note

如果终端没有启动，iPhone 显示红屏，运行npm start并保持终端打开。

在您喜欢的任何编辑器中设置您的项目。React Native 并不强迫您，也没有偏好任何特定的编辑器，所以您可以继续默认使用 Xcode。但是，我们建议您在编辑器中打开您的项目，就像我们个人最喜欢的 Sublime Text 一样。

在index.io.js做一些改动。事实上，删除文件中的所有代码。现在，添加以下代码:

'use strict';

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

var {

AppRegistry,

StyleSheet,

Text,

View,

} = React;

var HelloWorld = React.createClass({

render: function() {

return (

<View style={styles.container}>

<Text style={styles.welcome}>

HelloWorld !!

</Text>

</View>

);

}

});

var styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center'

},

welcome: {

fontSize: 25,

textAlign: 'center'

}

});

AppRegistry.registerComponent('HouseShare', () => HelloWorld);

在 iOS 模拟器中按 Command + R，将刷新屏幕，如图 2-4 所示。(注意，在本书中，我们将使用 Command 键代替 CMD 键，这是等效的。)

图 2-4。

The screen is refreshed

真快！在几分之一秒的时间里，你可以看到你应用的变化。您不需要编译代码并重启模拟器来对本机更改做出 React。如果你以前做过任何原生 iOS 应用开发，点击刷新来查看变化可能会像一个奇迹。

现在，让我们来理解代码。该文件的顶部是下面一行:

'use strict';

这启用了严格模式，这为 React 本机 JavaScript 代码添加了改进的错误处理。ECMAScript 规范的第五版引入了严格模式。严格模式更容易编写安全的 JavaScript，并将糟糕的语法转换成真正的错误。这对于调试任何示例和使用未声明的变量都非常重要。

接下来是下面一行:

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

这将加载 React 本机模块，并将其分配给可在您的代码中使用的 React 本机变量。React Native 使用与 Node.js 相同的模块加载技术，带有require函数；这大致相当于在 Swift 中链接和导入库。

之后，添加以下代码片段:

var {

AppRegistry,

StyleSheet,

Text,

View,

} = React;

您正在将多个对象属性分配给一个变量；这被称为赋值过程中的析构。这个很酷的特性是在 JavaScript ECMAScript 6 中提出的。虽然它是可选的，但它非常有益；否则，每次在代码中使用组件时，都必须使用完全限定名，例如 React。模仿，React。样式表等等。这节省了不少时间。

接下来，您将创建一个视图:

var HelloWorld = React.createClass({

render: function() {

return (

<View style={styles.container}>

<Text style={styles.welcome}>

HelloWorld !!

</Text>

</View>

);

}

});

React Native 的基本构建块称为组件。您可以使用createClass方法来创建定制的组件类。这个类只有一个函数，render()。render功能负责屏幕上显示的内容。您使用 JavaScript 语法扩展(JSX)来呈现 UI。JSX 是一种 JavaScript 语法扩展，看起来类似于 XML。

现在，您可以定义应用的样式。这里你会用到 Flexbox 它类似于 CSS 之于 HTML。现在，您可以键入以下代码。我们将在下一章解释样式。

var styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center'

},

welcome: {

fontSize: 25,

textAlign: 'center'

}

});

你可以看到这种风格与 CSS 非常相似；您可以定义字体大小、对齐方式等。

最后一步是定义应用的入口点和根组件:

AppRegistry.registerComponent('HouseShare', () => HelloWorld);

这不是 UIWebView

您正在使用 web 技术，但您的应用没有 web 组件；它有一个本地组件。打开调试➤视图调试➤捕获视图层级(见图 2-5 )。

图 2-5。

Using the native component

当您遍历 UIWindow 的树时，您会看到代码中没有 UIWebView，以及“Hello World！!"是 RCTText 的调用，如图 2-6 。

图 2-6。

“Hello World !!” is the call of RCTText

启用实时重新加载

React Native 的另一个很酷的功能是 live reload。一旦有变化，它会在 iOS 模拟器中重新加载您的应用视图。要激活此选项，您需要通过按 Ctrl + Command + Z 从 iOS 模拟器中打开的应用访问开发者菜单，并选择启用实时重新加载选项。现在，对 JavaScript 代码所做的任何更改都会导致应用自动重新加载。

React Native 为什么不一样？

在深入 React 本地世界之前，您必须理解为什么需要另一个框架来构建移动应用。我们已经生活在一个充满能够构建移动应用的框架和工具链的世界里。在 React Native 出现之前，使用 web 技术构建移动应用可以通过两种策略实现:

基于 WebView:这些框架使用常见的 web 技术，如 HTML 和 JavaScript，并使用 WebView 加载应用。一个例子是流行的框架 Phonegap。
使用 web 技术的本地应用:这些框架再次使用常见的 web 技术，如 HTML 和 JavaScript(准确地说，它们模仿使用 JavaScript 和 HTML)来创建本地应用。一个例子是流行的框架 Titanium Appcelerator。

使用这些策略创建的应用存在性能问题。基于 WebView 的应用很慢，因为它们使用 DOM，并且 DOM 操作非常昂贵，这导致了性能问题。正如 Flipboard ( http://engineering.flipboard.com/2015/02/mobile-web/ ))的一篇博文中所说，“你不能用 DOM 构建 60fps 的滚动列表视图。”这是通过这种技术开发的应用的一个基本问题:尽管开发时间可能很快，但您最终会体验迟缓。

另一种策略是框架模仿 JavaScript 和 HTML，并将它们转换成本地代码，这种策略有其他挑战。尽管最终的应用本质上是原生的，但在从 JavaScript 到原生的转换过程中有一个基本问题:它运行在主线程上。在这些应用中，你总是直接与本地对象交互，这又一次导致了缓慢而呆滞的体验。

React Native 从根本上不同于这两种方法。它在单独的线程上运行所有布局，你的主线程自由更新 UI，使得动画和 UI 渲染流畅，就像 100%纯原生 app 一样。

React Native 使用 JavaScriptCore 框架运行 JavaScript。在 iOS 7 中，苹果为 JavaScriptCore 引入了原生的 Objective-C API。这个框架允许 JavaScript 和 Objective-C 相互交流。这意味着您可以从 Objective-C 创建并调用 JavaScript 函数，或者从 JavaScript 回调 Objective-C。这一切都像魔咒一样管用。

React Native 还有一个不同之处。正如您在 Hello World 示例中看到的，您用 JavaScript 编写一个组件，就像您用 React 一样，只是您没有使用 HTML div，而是使用了像 View 和 Text 这样的标签。在 iOS 应用的情况下，视图基本上是 UIView。

React 本机应用的剖析

现在让我们理解 React Native init命令生成的应用结构。如果您打开名为 HouseShare 的项目，它看起来就像一个普通的 Xcode 项目。它具有以下文件夹结构:

|ios

|- HouseShare

|- HouseShare.xcodeproj

|- HouseShareTests

|android

node_modules

index.ios.js

index.android.js

package.json

Note

随着框架的发展，这里定义的文件夹结构可能会改变或修改，但是大部分功能保持不变。

如果您在 Xcode 中打开项目，它将具有不同的文件夹结构。Xcode 中的“文件夹”实际上是群组，不一定链接到 Finder 中的文件夹。

iOS:iOS文件夹有两个文件夹和一个文件。如上图所示，有一个HouseShare文件夹，里面有所有的 Objective-C 代码，比如AppDelegate、Images.xcassets、Info.plistLaunchScreen.xib等文件。另一个文件夹是HouseShareTests，这是你所有测试用例所在的地方。最后是您的 Xcode 项目文件HouseShare.xcodeproj，它用于加载到 Xcode 中以构建您的应用。
package.json:此文件夹包含关于您的应用的元数据，当您运行 npm 安装时，它将安装所有依赖项。如果你熟悉 Ruby，它类似于一个 Gemfile。
node_modules:所有package.json中提到的节点模块都将被下载到这个文件夹中。该文件夹还包含 React 本机框架的代码。
这是您开始编写 iOS 应用的文件。
AppDelegate.m:这是任何 iOS app 的起点。
Android : React Native 也支持 Android 的开发。你所有的原生 Android 代码都在这个文件夹里。
这个文件是你开始为 Android 应用编程的地方。

让我们从HouseShare/ios/HouseShare/AppDelegate.m打开AppDelegate.m文件:

#import "AppDelegate.h"

#import "RCTRootView.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

NSURL *jsCodeLocation;

/**

* Loading JavaScript code - uncomment the one you want.

*

* OPTION 1

* Load from development server. Start the server from the repository root:

*

* $ npm start

*

* To run on a device, change localhost to the IP address of your computer

* (you can get this by typing ifconfig into Terminal and selecting the

* inetvalue underen0:) and make sure your computer and iOS device are

* on the same Wi-Fi network.

*/

jsCodeLocation = [NSURL URLWithString:@"``http://localhost:8081/index.ios.bundle

/**

* OPTION 2

* Load from pre-bundled file on disk. To re-generate the static bundle

* from the root of your project directory, run

*

* $ react-native bundle --minify

*

* seehttp://facebook.github.io/react-native/docs/runningondevice.html

*/

// jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation

moduleName:@"HouseShare"

launchOptions:launchOptions];

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

UIViewController *rootViewController = [[UIViewController alloc] init];

rootViewController.view = rootView;

self.window.rootViewController = rootViewController;

[self.window makeKeyAndVisible];

return YES;

}

@end

RCTRootView是 React Native 提供的 Objective-C 类，继承自 iOS UIView类。它获取并执行您的 JavaScript 代码。

它还加载了http://localhost:8081/index.ios.bundle URL，其中有您用index.ios.js编写的代码，还有一个由 React 本机框架添加的程序。

排除故障

用 React Native 调试符合我们调试 web 应用的方式；总之，真的很简单。要访问调试选项，请在 iOS 模拟器中加载的应用内按 Command + D。这将打开一个提供几个调试选项的菜单，如图 2-7 所示。

图 2-7。

Debugging options

您必须为最终版本禁用此菜单，因为您的最终用户不应看到这些选项。要禁用它，请在 Xcode 中打开项目，然后选择:产品➤方案➤编辑方案(或按 Command +)

让我们回顾一下图 2-7 中显示的每个选项。

重新加载

reload 选项使用最新的 React 本机代码刷新模拟器中的屏幕，而无需再次编译项目。这可以通过两种方式实现:一、点击菜单中的重新加载选项，如图 2-7 所示，或者按 Command + R，这样会重新加载 JavaScript 代码中所做的所有更改。

在 Swift 或 Objective-C 文件中所做的任何更改都不会反映出来，因为这些更改需要重新编译。此外，如果您添加任何资产，如图像，应用需要重新启动。

在 Chrome 中调试

这是调试用 React Native 编写的 JavaScript 代码的最好和最常用的选项之一。与 web 应用一样，你可以在 Chrome 中调试 React 原生应用。当你点击“在 Chrome 中调试”时，它会在 Chrome 中打开http://localhost:8081/debugger-ui(图 2-8 )。

图 2-8。

Debugging in Chrome

安装 React 开发工具，这是一个 Chrome 扩展，用于调试 React 应用和 React 本机代码。它允许您在 Chrome 开发者工具中检查 React 本地组件层次结构。要安装它，请访问 Chrome 网上商店或访问以下网址: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en 。

一旦安装了扩展，按 Command + Option + J 或者从 Chrome 浏览器中选择查看➤开发者➤开发者工具来访问开发者工具控制台。

你将会在你的 Chrome 开发工具中获得一个名为 React 的新标签。这向您显示了已经呈现在页面上的根 React 组件，以及它们最终呈现的子组件。还可以看到属性、状态、组件、事件监听器，如图 2-9 所示。

图 2-9。

Debugging in Chrome DevTools

查看图 2-10 ，你可以看到一个类似于 Xcode 的层次结构:Hello World 被包装在 RCTText 中，然后又被包装在 RCTview 中。

图 2-10。

Debugging the app with the React tab in Chrome DevTools

在 Safari 中调试

如果你没有 Chrome，你也可以使用 Safari 进行调试，但 Chrome 是调试 React 原生应用的首选。

显示 FPS 监视器

许多应用使用大量的动画和图形。FPS(每秒帧数)为您的应用定义这些动画的平滑度；这在游戏应用中被广泛使用。当您在菜单中选择“显示 FPS 监视器”时，它会在模拟器中显示您的应用的一些属性(图 2-11 )。虽然你可能在你的 Hello World 应用中找不到这些属性的太多用途，但它们对于动画密集型应用来说非常有用，可以防止它们进入昏睡模式，从而创建不稳定的用户体验。见图 2-11 。

图 2-11。

Additional properties in the simulator

该检查元件

您还可以从模拟器中检查 React 本地元素，有点类似于您在浏览器中检查元素的方式，尽管您目前不能像在浏览器中那样更改属性的实时值。现在，您可以看到任何对象的样式表属性。点击 HelloReact！！文本(图 2-12 )，它将打开该元素的详细信息。

图 2-12。

Click the text to see element details

该元素的详细信息显示在左下方的图 2-13 中。

图 2-13。

Font details

你可以看到 Hello World 的字体大小是 25，并且居中对齐。

开始分析

剖析用于衡量绩效。概要分析会话提供了对代码的哪些部分最常用、需要多少时间以及应该改进代码的哪些部分的深入了解。您还可以从分析器在一个方法上停止的次数中找到每个方法花费的时间。

下面的 URL 链接到一篇非常好的博客文章，这篇文章将很好地概述如何使用 Xcode 进行分析: www.raywenderlich.com/23037/how-to-use-instruments-in-xcode .

摘要

在这一章中，你被介绍到 React 原生。您设置了 React 本机开发环境，并编写了第一个应用。您还了解了 React 本机应用的文件夹结构以及如何调试。现在，您已经做好了准备，可以开始使用 React Native 为您的 iOS 应用创建用户界面了。

在下一章中，您将学习如何通过掌握 Flexbox 来创建令人惊叹的用户界面。您将看到如何从一个组件导航到另一个组件，如何将图像添加到未封装的应用中，以及如何使用 React Native 创建 ListView 和 ScrollView。

三、画布、画笔和颜料：使用用户界面

用户界面是从混乱的复杂到优雅的简单的转变过程—阿克沙特·保罗

在前一章中，我们介绍了 React Native 并创建了我们的第一个 React Native 应用。现在我们的项目有了一个空白的框架，我们将用一个令人惊叹的用户界面来填充它。在本章中，我们将讨论以下主题:

导航仪
flex box(flex box)的缩写形式
图像
TouchableHighlight
路由到新组件
ListView
ScrollView

任何有经验的软件专业人士都会同意——一个应用的成功取决于它不仅运行完美，而且看起来很棒。因此，一个优秀的用户界面对你的应用的成功有着巨大的影响。

布局系统是一个需要掌握的基本概念，以便创建优秀的应用。让我们首先了解如何使用 React Native 在 iOS 应用中导航。

导航仪

NavigatorIOS 是一个用于创建导航的 React 本地组件。它包装了 UIKit 导航，并允许你在应用中添加向后滑动功能。NavigatorIOS 管理一堆视图控制器，以便为分层内容提供一个向下钻取的界面。现在我们知道 NavigatorIOS 是做什么的了，让我们在项目中实现它。

首先，在index.ios.js文件的组件列表中添加 NavigatorIOS:

var {

AppRegistry,

StyleSheet,

Text,

View,

NavigatorIOS,

} = React;

现在让我们创建一个具有 NavigatorIOS 的组件，并将其命名为mainView，然后让我们在mainView中加载另一个组件，我们将其命名为Home:

var mainView = React.createClass ({

render: function() {

return (

<NavigatorIOS

style={styles.navigator} initialRoute={{

title: 'House Share',

component: Home

}}

/>

);

},

});

Home component will be like home page of our application.

NavigatorIOS 是一个 React 本机组件；我们还使用initialRoute为页面提供了标题(House Share)和组件名称(Home)。还有其他选项，记录在 https://facebook.github.io/react-native/docs/navigatorios.html 中。

NavigatorIOS 有助于最基本的 IOS 路由。路线是描述导航器中每个视图的对象。首先，将路线提供给导航员。在前面的代码中，我们从我们的mainView调用组件 Home。让我们添加一个空的 Home 组件:

var Home = React.createClass({

render: function() {

return (

<View>

</View>

);

}

});

让我们也给我们的mainView组件添加一些样式:

var styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center'

},

welcome: {

fontSize: 25,

textAlign: 'center'

},

navigator: {

flex: 1

}

});

现在让我们将应用的入口点更新为mainView:

AppRegistry.registerComponent('HouseShare', () => mainView);

现在让我们用 Xcode 构建我们的应用，看看结果，如图 3-1 所示。

图 3-1。

Our application, with updated navigation bar at the top

非常好——我们可以在顶部看到一个更新的导航栏。让我们给这个导航栏添加一些颜色，使我们的更改更加明显:

var mainView = React.createClass ({

render: function() {

return (

<NavigatorIOS barTintColor='#48BBEC' titleTextColor= "#FFFFFF" style={styles.navigator} initialRoute={{

title: 'House Share',

component: Home

}}

/>

);

},

});

我们已经使用barTintColor和titleTextColor给我们的导航栏添加了颜色(见图 3-2 )。

图 3-2。

Our toolbar now has color

我们在这一部分做了一些样式设计，如果你来自网格布局背景，这可能对你来说是新的东西。React Native 使用 Flexbox 进行样式化，我们将在下一节详细讨论。

flex box(flex box)的缩写形式

在前面的例子中创建我们的布局时，您一定已经看到了样式中提到的flex属性。这是因为 React 原生应用使用 Flexbox 布局模型。

React 原生 Flexbox 布局模型的灵感来自于 CSS3 中的 CSS Flex Box 布局。React 原生团队专门为 iOS 重新编写了这一功能。Flexbox 背后的主要思想是能够创建布局，而不必担心不同的屏幕尺寸或设备方向。flex 容器扩展项目以填充可用空间，或者收缩项目以防止溢出。让我们了解一些 Flexbox 的基本知识，以加快我们的布局开发。首先，让我们更新视图:

var Home = React.createClass({

render: function() {

return (

<View style={styles.container}>

<View style={styles.topBox} />

<View style={styles.bottomBox} />

</View>

);

}

});

我们已经创建了一个带有样式容器的主视图和两个带有样式topBox和bottomBox的子视图。现在，让我们创建样式:

var styles = StyleSheet.create({

container: {

flex: 1,

flexDirection: 'column'

},

welcome: {

fontSize: 25,

textAlign: 'center'

},

navigator: {

flex: 1

},

topBox: {

flex: 2,

backgroundColor: '#CCE5FF'

},

bottomBox: {

flex: 1,

backgroundColor: '#FFFFCC'

}

});

返回模拟器，使用 Command+R 刷新视图。

图 3-3。

Screen in portrait mode

现在，旋转模拟器，你会看到它自动调整这些彩色方框的大小。

让我们将模拟器改为风景模式(见图 3-4 )。这可以使用 Command +右/左箭头键(⌘+Left 箭头)轻松完成。您可以看到框是如何调整其大小的，标题是如何调整其宽度的，以便利用所有可用的空间。多亏了 Flexbox，一个相当费力的任务被简化了。

图 3-4。

Screen in landscape mode

现在，让我们回顾一下 flex 属性Flex-direction和Flex。

弯曲方向

Flexbox 是一个单向布局概念。Flex-direction允许你定义子元素的流向。它可以有两个值，row和column。在前面的例子中，我们使用了column。

我们改成row:

container: {

flex: 1,

flexDirection: 'row'

}

返回模拟器，用命令+R 刷新视图(见图 3-5 )。

图 3-5。

Changing the orientation of the box

我们可以看到盒子的方向是如何变化的。现在再次将属性flexDirection改为列(见图 3-6 ))。

图 3-6。

Changing the property to column

弯曲

您一定见过样式表中的flex值；它可以是整数或小数，表示盒子的相对大小:

container: {

flex: 1,

flexDirection: 'column'

},

topBox: {

flex: 2,

backgroundColor: '#CCE5FF',

},

bottomBox: {

flex: 1,

backgroundColor: '#FFFFCC'

}

我们的观点是:

<View style={styles.container}>

<View style={styles.topBox} />

<View style={styles.bottomBox} />

</View>

所以flex定义了盒子的大小百分比。我们可以看到容器内部有两个视图，topBox和bottomBox，分别有2和1的flex值(见图 3-7 )。

图 3-7。

Container in 2:1 ratio

现在，更新视图并在容器视图中添加一个topBox视图:

<View style={styles.container}>

<View style={styles.topBox} />

<View style={styles.bottomBox} />

<View style={styles.topBox} />

</View>

刷新视图。容器现在有三个视图:topBox、bottomBox，然后又是topBox(见图 3-8 )。

图 3-8。

Container with three views

这将把视图分成 2:1:2 的比例，因为它们的flex值是 2:1:2 的比例。

为了更好地理解这是如何工作的，让我们改变flex值，看看它如何改变我们的屏幕。让我们把topBox的flex值改成1。

让我们将 CSS 更新为:

container: {

flex: 1,

flexDirection: 'column'

},

topBox: {

flex: 1,

backgroundColor: '#CCE5FF',

},

bottomBox: {

flex: 1,

backgroundColor: '#FFFFCC'

}

刷新视图查看变化，如图 3-9 所示。

图 3-9。

View in ratio of 1:1:1

我们可以看到，现在屏幕被分割成 1:1:1 的比例，因为视图的flex值是 1:1:1 的比例。使用 Flexbox，很容易创建可以根据屏幕大小和方向调整大小的布局。这只是对 Flexbox 的介绍；我们将在需要时在整本书中解释更多的属性。您还可以在 https://facebook.github.io/react-native/docs/flexbox.html 找到更多选项。

添加图像

React Native 有一个内置组件Image，它将帮助我们显示图像，包括网络图像、临时本地图像，以及来自本地磁盘的图像，如相机胶卷。首先，我们将显示本地图像。

在 Xcode 中打开Image.xacassets文件(参见图 3-10 )。点击底部的+按钮。

图 3-10。

Image.xacassets in Xcode

将图像集命名为“主页”，并将主页图像拖动到屏幕上的方框中(参见图 3-11 )。

图 3-11。

Image set “home”

xcassets 的使用是 iOS 7 之后的新标准。资产目录管理应用的图像；iOS 有不同的图像分辨率，并将它们分组在一起。构建时，Xcode 会将这个图像目录编译成最有效的包，以便最终分发。

既然我们已经将图像添加到了项目中，那么让我们将它添加到组件中。首先，将Image组件添加到我们的组件列表:

var {

AppRegistry,

StyleSheet,

Text,

View,

NavigatorIOS,

Image

} = React;

现在让我们将图像添加到我们的视图中:

var home = React.createClass({

render: function() {

return (

<View style={styles.container}>

<View style={styles.topBox} >

</View>

<View style={styles.bottomBox} >

<Image source={require('image!home')} style={styles.image}/>

</View>

<View style={styles.topBox} >

</View>

);

}

});

require('image!home)指向名为home的图像的资产目录。

让我们也指定这个图像的宽度和高度:

image: {

width: 70,

height: 70

},

由于我们在 Xcode 中做了改动，所以我们必须重启模拟器。停止应用并重新生成代码。我们可以看到房子的图像显示在屏幕上(见图 3-12 )。

图 3-12。

Now we have a house image

现在，让我们通过用下面的样式更新bottomBox来添加一些样式:

bottomBox: {

flex: 1,

backgroundColor: '#FFFFCC',

alignItems: 'center',

justifyContent: 'center',

},

alignItems和justifyContent分别定义沿横轴和主轴排列伸缩项目的默认行为。因为我们想在中间显示这个，所以我们将这些值更新为center。

刷新屏幕，你会发现房屋图像在视图中居中(见图 3-13 )。

图 3-13。

The house is now centered

我们还可以给定任何服务器图像 URL 作为源，并且Image组件将负责从网络加载它。我们将在本章的后半部分做这件事。

可触摸高亮显示

触摸是与 iOS 应用交互的基本方式。TouchableHighlight是一个 React 本地组件，它帮助我们创建按钮，以便在触摸时做出正确的响应。这些实际上不是按钮，但是 React 原生团队认为直接在 JavaScript 中构造按钮比使用 UIButton 更容易。你 app 里的按钮用的是TouchableHighlight，不是按钮，但工作起来像按钮。让我们用一个例子来理解这一点。

让我们将 TouchableHighlight 组件添加到代码中:

var {

AppRegistry,

StyleSheet,

Text,

View,

NavigatorIOS,

TouchableHighlight

} = React;

更新视图并添加两个TouchableHighlight按钮:

var Home = React.createClass({

render: function() {

return (

<View style={styles.container}>

<View style={styles.topBox} />

<View style={styles.bottomBox} />

<View style={styles.topBox} >

<TouchableHighlight style={styles.button}

underlayColor='#99d9f4'>

<Text style={styles.buttonText}>Show Houses</Text>

</TouchableHighlight>

<TouchableHighlight style={styles.button}

underlayColor='#99d9f4'>

<Text style={styles.buttonText}>Add House</Text>

</TouchableHighlight>

</View>

);

}

});

当然，我们需要按钮的样式表:

button: {

flex: 1,

backgroundColor: '#48BBEC',

borderColor: '#48BBEC',

borderWidth: 1,

borderRadius: 8,

alignSelf: 'stretch',

justifyContent: 'center',

margin: 10

},

buttonText: {

fontSize: 18,

color: 'white',

alignSelf: 'center'

}

在 iOS 模拟器中刷新应用。我们将在第三个块的屏幕上看到两个按钮(如图 3-14 所示)。

图 3-14。

Screen with two buttons at bottom

让我们继续构建我们的页面，再添加一个视图来列出住房选项。这将通过单击 show house 页面来完成，该页面将重定向到另一个组件。将以下代码替换为Home组件:

var Home = React.createClass({

_handleListProperty: function() {

console.log(‘Button clicked successfully’);

},

render: function() {

return (

<View style={styles.container}>

<View style={styles.topBox} />

<View style={styles.bottomBox} />

<View style={styles.topBox} >

<TouchableHighlight

style={styles.button}

onPress= {this._handleListProperty }

underlayColor='#99d9f4'

>

<Text style={styles.buttonText}>List properties</Text>

</TouchableHighlight>

<TouchableHighlight style={styles.button}

underlayColor='#99d9f4'>

<Text style={styles.buttonText}>Add House</Text>

</TouchableHighlight>

</View>

);

}

});

让我们回顾一下我们在这里做了什么；我们已经为列表属性部分的TouchableHighlight组件添加了一个onPress属性。每当有人按下列表属性按钮时，就会调用函数_ handleListProperty。

如果您构建您的应用并在开发工具中打开控制台，每次您单击列表属性按钮时，您都会在控制台中看到消息“按钮已成功单击”。

接下来，我们将创建我们的ListProperty组件。但是首先，让我们重构我们的代码，并将我们的组件保存在单独的文件中。创建一个包含Components子文件夹的App文件夹，这是我们保存 React 本地组件的地方。在Components文件夹中，创建文件Home.js,并将它各自的组件放在那里。然后我们将在我们的index.ios.js中要求它们，现在看起来像这样:

'use strict';

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

var Home = require('./App/Components/Home');

var {

AppRegistry,

StyleSheet,

Text,

View,

NavigatorIOS,

TouchableHighlight

} = React;

var mainView = React.createClass ({

render: function() {

return (

<NavigatorIOS barTintColor='#48BBEC' titleTextColor= "#FFFFFF" style={styles.navigator} initialRoute={{

title: 'House Share',

component: Home

}}/>

);

},

});

var styles = StyleSheet.create({

navigator: {

flex: 1

}

});

AppRegistry.registerComponent('HouseShare', () => mainView);

路由到组件

在 React Native 中，您将构建许多组件，并在它们之间来回路由。我们必须有办法做到这一点。在本节中，我们将学习从一个组件到另一个组件的路由。在创建组件ListProperty之前，我们需要导航到这个组件的路径。这可以通过修改Home组件中的_handleListProperty函数来实现。在./App/Components/Home.js用以下代码替换_handleListProperty功能:

_handleListProperty: function() {

this.props.navigator.push({

title: "List Properties",

component: ListProperty

})

},

在这里，navigator.push向前导航到新的路线；这种情况下是ListProperty。

现在让我们通过在./App/Components/文件夹中创建一个文件ListProperty.js来创建一个List Property组件。在您的ListProperty.js文件中添加以下代码:

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

var {

View

} = React;

var ListProperty = React.createClass({

render: function() {

return (

<View />

);

}

});

module.exports = ListProperty;

刷新您的应用并点击列表属性按钮，这将把您带到如图 3-15 所示的空视图。

图 3-15。

Empty view with traversing option

在左上角，您将看到一个选项，可以遍历回上一个组件。NavigatorIOS 维护这个返回栈，通过它可以返回到上一个组件。现在让我们来处理这个空组件。这个想法是创建一个包含属性列表的表格视图，每个属性的左侧都有一个图像缩略图。其余的细节应该出现在它的旁边。

为了简化本章，我们将模拟数据，而不是从外部服务中提取数据(稍后，您将学习如何从外部 API 中提取相同的数据)。有了这些数据，我们将显示酒店的名称、地址和缩略图。这看起来有点像图 3-16 。

图 3-16。

Property name and address

将以下代码添加到文件./App/Components/ListProperty.js中的ListProperty组件中:

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

var {

Image,

StyleSheet,

Text,

View

} = React;

var MOCK_DATA = [

{name: 'Mr. Johns Conch house', address: '12th Street, Neverland', images: {thumbnail: 'http://hmp.me/ol5

];

var ListProperty = React.createClass({

render: function() {

var property = MOCK_DATA[0]

return (

<View style={styles.container}>

<Image

source={{uri: property.images.thumbnail}}

style={styles.thumbnail}/>

<View style={styles.rightContainer}>

<Text style={styles.name}>{property.name}</Text>

<Text style={styles.address}>{property.address}</Text>

</View>

);

}

});

var styles = StyleSheet.create({

container: {

flex: 1,

flexDirection: 'row',

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

thumbnail: {

width: 53,

height: 81,

},

rightContainer: {

flex: 1,

},

name: {

fontSize: 20,

marginBottom: 8,

textAlign: 'center',

},

address: {

textAlign: 'center',

},

});

module.exports = ListProperty;

让我们在 iOS 模拟器中刷新我们的应用，看看有什么变化(见图 3-17 )。

图 3-17。

Thumbnail image with property name and address

让我们回顾一下我们在这里做了什么:

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

var {

Image,

StyleSheet,

Text,

View

} = React;

我们首先指定了本节中要使用的所有组件。我们再次添加了Image组件，它将用于加载我们的图像——不是从一个捆绑的图像，而是像前面承诺的那样，从一个图像 URL。

接下来，我们添加了一些模拟数据:

var MOCK_DATA = [

{name: 'Mr. Johns Conch house', address: '12th Street, Neverland', images: {thumbnail: 'http://hmp.me/ol5

];

这里，我们为我们的属性缩略图添加了名称、地址和图像 URL。随着示例的深入，我们将向这个模拟数据添加更多的值。

接下来，我们创建了我们的ListProperty组件:

var ListProperty = React.createClass({

render: function() {

var property = MOCK_DATA[0]

return (

<View style={styles.container}>

<Image

source={{uri: property.images.thumbnail}}

style={styles.thumbnail}/>

<View style={styles.rightContainer}>

<Text style={styles.name}>{property.name}</Text>

<Text style={styles.address}>{property.address}</Text>

</View>

);

}

});

我们的ListProperty组件有一个变量属性，它包含来自MOCK_DATA数组的数据。然后我们使用一个View组件来创建一个包含图片组件中缩略图的视图。在Image组件中，我们有属性 source，它可以有值 http address、本地文件路径或静态图像资源的名称。

使用一个Text组件，我们从模拟数据中指定了名称和地址:

var styles = StyleSheet.create({

container: {

flex: 1,

flexDirection: 'row',

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

thumbnail: {

width: 53,

height: 81,

},

rightContainer: {

flex: 1,

},

name: {

fontSize: 20,

marginBottom: 8,

textAlign: 'center',

},

address: {

textAlign: 'center',

},

});

module.exports = ListProperty;

最后，我们添加了样式并导出了我们的ListProperty组件。

列表视图

在上一节中，我们通过指定元素的索引来填充数组中的一个元素。在本节中，我们将使用ListView填充一个数据列表。在我们开始之前，让我们多了解一点关于ListView组件的知识。

一个ListView是为填充动态数据的垂直滚动列表而设计的组件。最简单的步骤是创建一个ListView数据源，用类似于本地TableView数据源的数据数组填充它，然后用该数据源和一个renderRow回调实例化一个ListView组件。这从数据数组中取出一个 blob，并返回一个可呈现的组件，它将被显示。

ListView看起来与TableView非常相似，但是实现并没有真正使用TableView.，而是在幕后使用了ScrollView。像滑动删除、重新排序等功能不能通过ListView直接使用。

替换您的ListProperty.js中的以下代码:

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

var {

Image,

StyleSheet,

Text,

View,

ListView

} = React;

var MOCK_DATA = [

{name: 'Mr. Johns Conch house', address: '12th Street, Neverland', images: {thumbnail: 'http://hmp.me/ol5

{name: 'Mr. Pauls Mansion', address: '625, Sec-5, Ingsoc', images: {thumbnail: 'http://hmp.me/ol6

{name: 'Mr. Nalwayas Villa', address: '11, Heights, Oceania', images: {thumbnail: 'http://hmp.me/ol7

{name: 'Mr. Johns Conch house', address: '12th Street, Neverland', images: {thumbnail: 'http://hmp.me/ol5

{name: 'Mr. Pauls Mansion', address: '625, Sec-5, Ingsoc', images: {thumbnail: 'http://hmp.me/ol6

{name: 'Mr. Nalwayas Villa', address: '11, Heights, Oceania', images: {thumbnail: 'http://hmp.me/ol7

{name: 'Mr. Johns Conch house', address: '12th Street, Neverland', images: {thumbnail: 'http://hmp.me/ol5

{name: 'Mr. Pauls Mansion', address: '625, Sec-5, Ingsoc', images: {thumbnail: 'http://hmp.me/ol6

{name: 'Mr. Nalwayas Villa', address: '11, Heights, Oceania', images: {thumbnail: 'http://hmp.me/ol7

];

var ListProperty = React.createClass({

getInitialState: function() {

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

return {

dataSource: ds.cloneWithRows(MOCK_DATA),

};

},

render: function() {

return (

<ListView

dataSource={this.state.dataSource}

renderRow={this.renderProperty}

style={styles.listView}/>

);

},

renderProperty: function(property) {

return (

<View style={styles.container}>

<Image

source={{uri: property.images.thumbnail}}

style={styles.thumbnail}/>

<View style={styles.rightContainer}>

<Text style={styles.name}>{property.name}</Text>

<Text style={styles.address}>{property.address}</Text>

</View>

);

},

});

var styles = StyleSheet.create({

container: {

flex: 1,

flexDirection: 'row',

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

thumbnail: {

width: 63,

height: 91,

},

rightContainer: {

flex: 1,

},

name: {

fontSize: 20,

marginBottom: 8,

textAlign: 'center',

},

address: {

textAlign: 'center',

},

listView: {

paddingTop: 20,

backgroundColor: '#F5FCFF',

},

});

module.exports = ListProperty;

在 iOS 模拟器中刷新您的应用以查看更新后的视图，如图 3-18 所示。

图 3-18。

Scrollable addresses

太好了。现在我们有了一个可以滚动浏览的属性列表。现在让我们回顾一下实施情况:

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

var {

Image,

StyleSheet,

Text,

View,

ListView

} = React;

我们再次指定了本节中所有组件的用途。增加了一个新组件— ListView。如果你看过除了ListView之外的 React 原生文档来实现类似的功能，那么ScrollView. ListView可能比简单地呈现所有这些元素或者将它们放在ScrollView中要好得多。这是因为，尽管 React Native 速度很快，但呈现一个非常大的元素列表可能会很慢。与TableView类似，ListView实现元素的渲染列表，这样你只显示屏幕上显示的元素；那些已经渲染但现在不在屏幕上的将从本机视图层次结构中删除，这使得渲染平滑而快速。

展望未来，我们已经更新了我们的MOCK_DATA:

var MOCK_DATA =[