學習 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
• 2145
• 公司新聞，網站開發，網站設計，UI