本篇目的

俗話說「工欲善其事，必先利其器」，React Native 是強大的武器，而熟悉它則是磨亮這個武器。就像學習 HTML 時，必先從基本的 HTML Tag 去下手，這邊則從基本的 React Native Component 開始，往前再踏出一步。

UI Explorer

想要知道到底 React Native 幫我們封裝了哪些可以用的 UI Component，最快的方式就是參考官方的 UIExplorer 範例，你可以選擇 Git Clone 一份下來或是在 React Native Playground 試試。

(貼在 iTHome 不能放 iframe，殘念)

現在 React Native 的官網範例旁邊也都有附在線上模擬器上執行的範例，可以多加利用：

View

View 是 React Native 中最基礎的 Component，如同 React DOM 裡面的 div 一樣重要，可以把它拿來做排版上的設定、處理 Touch 的 Event 等等。

會對應到 iOS 上的 UIView、以及在 Android 的 android.view。

固定 Layout

直接使用 width、height 這兩個 style 的屬性來調整 View，它就會保持著固定的大小：

<View style={{ width: 50, height: 50 }} />

例如下面這段程式碼：

<View>
  <View style={{ width: 200, height: 150, backgroundColor: '#EAB637'}} />
  <View style={{ width: 400, height: 200, backgroundColor: '#A3EA7E'}} />
  <View style={{ width: 200, height: 150, backgroundColor: '#EAB637'}} />
  <View style={{ width: 400, height: 200, backgroundColor: '#A3EA7E'}} />
</View>

就能排出這樣的畫面：

Flex Layout

我們可以使用 Flexbox，讓 View 依照螢幕長寬、剩餘空間來做分配，Flexbox 已經在上一篇 Style & Layout 中介紹過，所以我們直接來看範例：

<View style={{ flex: 1 }}>
  <View style={{ flex: 1, backgroundColor: '#D5E0CA'}} />
  <View style={{ flex: 2, backgroundColor: '#92AB87'}} />
  <View style={{ flex: 3, backgroundColor: '#536A56'}} />
  <View style={{ flex: 4, backgroundColor: '#D3C3BE'}} />
  <View style={{ flex: 5, backgroundColor: '#E6DFD8'}} />
</View>

把五塊元素各切成 1/15、2/15、3/15、4/15、5/15 的佔比：

巢狀 View

在 Flex 的架構下，要做出巢狀的 View 也是小菜一碟，這邊我們包個三層，並在 Container 的部分加上 20 的 padding，讓它變得更清楚易懂：

<View style={{ flex: 1, backgroundColor: '#D5E0CA', padding: 20 }}>
  <View style={{ flex: 2, backgroundColor: '#92AB87'}} />
  <View style={{ flex: 3, backgroundColor: '#536A56', padding: 20 }} >
    <View style={{ flex: 4, backgroundColor: '#D3C3BE'}} />
    <View style={{ flex: 5, backgroundColor: '#E6DFD8'}} />
  </View>
</View>

而且每一層都能去分配比例：

更詳細的內容請參閱 View 的官方文件。

Text

Text 是用來呈現一段文字的 Component，我們這邊直接搬出最強大的出師表：

export default class TextDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          臣亮言：先帝創業未半，而中道崩殂。
          今天下三分，益州疲弊，此誠危急存亡之秋也。
          然侍衛之臣，不懈於內；忠志之士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。
          誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；
        </Text>
        <Text style={styles.paragraph}>
          不宜妄自菲薄，引喻失義，以塞忠諫之路也。
          宮中府中，俱為一體，陟罰臧否，不宜異同。
          若有作姦犯科，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治，不宜篇私，使內外異法也。
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#EDE7C9',
    padding: 20,
  },
  paragraph: {
    flex: 1,
    backgroundColor: '#D25141',
    color: '#F9CF7A',
    fontSize: 24,
    lineHeight: 32,
    padding: 20,
  },
});

兩個段落用了兩個 Text 來呈現，並加上了比較適合閱讀的 padding、fontSize 跟 lineHeight：

巢狀 Text

而我們還可以用巢狀的 Text 去指定細部文字的格式，React Native 會在 iOS 上把它轉成 NSAttributedString，在 Android 上則會轉成 SpannableString。

下面這段程式加上巢狀的 Text 來把 臣亮言 變成粗體，危急存亡之秋、妄自菲薄 上特別的顏色：

<View style={styles.container}>
  <Text style={styles.paragraph}>
    <Text style={{ fontWeight: 'bold' }}>臣亮言</Text>：先帝創業未半，而中道崩殂。
    今天下三分，益州疲弊，此誠<Text style={{ color: '#4B3061' }}>危急存亡之秋</Text>也。
    然侍衛之臣，不懈於內；忠志之士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。
    誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；
  </Text>
  <Text style={styles.paragraph}>
    不宜<Text style={{ color: '#4B3061' }}>妄自菲薄</Text>，引喻失義，以塞忠諫之路也。
    宮中府中，俱為一體，陟罰臧否，不宜異同。
    若有作姦犯科，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治，不宜篇私，使內外異法也。
  </Text>
</View>

更詳細的內容請參閱 Text 的官方文件。

Image

要放置圖片有幾種不同的方式：

靜態圖片資源

可以直接用 require 去載入圖檔，然後丟進 Image 的 source：

<Image source={require('./my-icon.png')} />

React Native 的 Packager 會幫我們把圖檔的處理給搞定，就像 Webpack 的 file-loader 一樣方便。

還可以放不同解析度的圖檔，讓 Packager 幫我們處理：

.
└── img
    ├── check@2x.png
    └── check@3x.png

<Image source={require('./check.png')} />

在 iPhone 7 上會使用 check@2x.png，在 iPhone 7 Plus 和 Nexus 5 上則會使用 check@3x.png。

網路上的圖片

要在 source 的 uri 屬性上面指定網址：

<Image 
  source={{
    uri: 'https://facebook.github.io/react/img/logo_og.png',
  }}
  style={{ width: 400, height: 400 }} 
/>

需要注意的是，針對網路上的圖片，必須在 Image 上面先指定好長寬，如果想知道為什麼，可以參考官網 Why Not Automatically Size Everything? 這邊的解釋。

也有從裝置上的檔案系統拿圖片的方式，更詳細的內容請參閱 Image 的官方文件。

結語

排版是做出美觀的客戶端程式的基礎，學習了區塊、文字、圖片的擺設後，我們已經可以做出一些靜態的內容，下一篇會開始介紹到幾個能做出互動的 Component。