学习 React Native 15
第三章： 移动组件
上一章，我们开发了一个简单的天气应用。 为了达成这个程序，我们快速了解了如何使用 React Native 去开发应用的界面。 本章我们更深入的了解一下基于移动设备开发的组件的基本知识，同是也了解一下他们和 HTML的元素有哪些区别。 移动设备的界面和传统的网页界面最主要的区别就是对于不同的设备都会有自己的组件标准，所以，你也可以很容易就清楚，我们在开发移动应用时就得不同的平台使用不同的组件。
本章，我们首先更深入的了解一些最常用的那些基本组件： <View>, <Image>, 及 <Text>. 然后，我们会讨论一下如何把触碰和手势等加入到 React Native 的组件里，并告诉你如何使用程序来处理这些触碰事件。了解了基本组件后，我们就得来处理一些高层次的组件，比方 <ListView>, <TabView>以及 <NavigatorView>， 这些组件能够让你组合一些其他的视图组件成为一个标准的移动接口的模式。
HTML 元素和iOS 原生组件的相似性
在开发网站的时候，我们要使用各种不同的基本 HTML元素。 包括了 <div>, <span>, 以及 <img>; 同时也包括一些组织排版元素诸如：<ol>, <ul> 以及 <table>. ( 我们也会想到一些其他元素 <audio>, <svg>, <canvas>,等等，但在本章我们先不考虑这些)。
在使用 React Native 开发时，我们不会用到这些 HTML 元素，但我们会使用很多组件和上述的这些有很多相似的地方。
尽管上面所列的这些元素基本上使用功能非常相近，但他们是不能替换使用的。我们来看看这些组件都是怎样通过 React Native 在移动设备上工作的， 同时也看看他们和网页上相近似的元素有哪些不同。
网页的文本对应 React Native:
处理文本通常都被认为是最基本的功能； 几乎任何应用程序都需要处理渲染文本文字。然而，在 React Native 中布署的移动应用中的文本文件的渲染和网页版是完全不同的。
当我们在 HTML中处理文本时， 你可以在很多不同的原始组件里添加无样式的文字。 而且，你可以在这个组件里面对这些文使用样式标签，比方 <strong> 或者 <em>. 所以你在 HTML 的代码应该如下所示：
<p>The quick <em>brown</em> fox jumped over the lazy <strong>dog</strong>.</p>
在 React Native 中， 只有 <Text>组件可以使用文本节点做为他的子组件。（事实上，<Text>也是唯一一个可以使用非组件的元素做为子组件的组件。）换句话说，下面的写法是不合法的：
<View>
Text doesn't go here!
</View>
但，如果你把文本包括在 <Text> 下就是合法的了。
<View> <Text>This is okay!</Text> </View>
当我们在 React Native中处理 <Text> 组件时，不再需要处理那些子标签，诸如 <strong> 或者<em>. 尽管在React Native 中你仍然可以使用象 fontWeight 以及 fontSytle等属性得到非常类似的效果。下面介绍给您的是如何通过行内的体系结构创造出非常类似的效果。
<Text>
The quick <Text style={{fontStyle: "italic"}}>brown</Text> fox
jumped over the lazy <Text style={{fontWeight: "bold"}}>dog</Text>.
</Text>
这种方法很快就会显得很冗长啰嗦。 你一定希望能用一些更简单的方式来创建样式组件：
var styles = StyleSheet.create({ bold: {
fontWeight: "bold"
italic: {
fontStyle: "italic"
});
var Strong = React.createClass({ render: function() {
return (
<Text style={styles.bold}>
{this.props.children} </Text>);
} });
var Em = React.createClass({ render: function() {
return (
<Text style={styles.italic}>
{this.props.children} </Text>);
} });
一旦你定义了这些样式组件，那你就可以在该代码中自由的使用相关的样式了。 现在你在看 React Native版本所处理的样式就和HTML版本非常相似了。
<Text>
The quick <Em>brown</Em> fox jumped
over the lazy <Strong>dog</Strong>.
</Text>
类似的， React Native 也并没有继承那些 Header 无素里面的概念，（h1, h2, 等等），但却非常容易定义你自己的文本样式，并且在需要的时候调用他。
一般来说，当处理文本样式时， React Native 会强迫你改变你通常所用到的言言水工。 所能继承的样式是有限的， 所以对于你所使用的树文件中所的文本结点来说，你不能象以前那样使用他们时，就已经有了默认的样式了。再次，Factbook 推荐我们使用下面的样式组件来解决这个问题：
你同时也会失去给整个子树文件设置默认字体的能力。 推荐你能在整个应用中使用同样的字体和大小的方法就是创建一个 MyAppText 组件，并让该组件包含了您所使用的文本字体以及大小的定义，在整个应用中都使用该组件。当然你也可以更清晰的指定该组件的使用范围，比方说是 MyAppHeaderText， 并只在相应的头文件的字体中使用该组件。 —— React Native 文档。
该文本组件文档对这个概念有更详细的解释。
也许这里的模式已经引起你的注意：React Native 在复用样式以及复用样式组件方面特别的固执。 下一章我们会讨论更多。
不深思则不能造于道。不深思而得者，其得易失。
名人名言- 曾国藩
- By 优联实达
- 2015-12-20
- 2433
- 公司新闻，网站开发，网站设计，UI