轉載請註明出處：小樓一夜聽春雨的專欄http://blog.csdn.net/win816723459/article/details/54134171

本節主要介紹以下元件

• View 容器元件（同Html中的div標籤）
• Text 文字元件（同Html中的p標籤）
• Image 圖片元件
• TextInput 輸入元件
• ScrollView 滑動容器元件（同原生元件ScrollView滑動方向水平和垂直）

1.View 容器元件

• 定義

  <View>React Native元件，相當於html中的<div>標籤，具有相同的特性，支援巢狀。<View>

  元件可以把固定的區間分割成獨立的、不同的部分。用於嚴格的模組化佈局組織工具，預設內部child垂直排列,可調整排列方向，這點與Android原生元件LinearLayout很像。

• 主要屬性 （詳細請參考View）

  • pointerEvents enum(‘box-none’, ‘none’, ‘box-only’, ‘auto’)

  用於控制當前檢視是否可以作為觸控事件的目標。
  * auto: 檢視可以作為觸控事件的目標
  * none: 檢視不能作為觸控事件的目標
  * box-none: 檢視自身不能作為觸控事件的目標，但其子檢視可以。
  * box-only：檢視自身可以作為觸控事件的目標，但其子檢視不能。
   
  

  • 樣式

  Flexbox
  
  backfaceVisibility enum('visible', 'hidden')
  
  backgroundColor string
  
  borderColor string
  
  borderTopColor string
  
  borderRightColor string
  
  borderBottomColor string
  
  borderLeftColor string
  
  borderRadius number
  
  borderTopLeftRadius number
  
  borderTopRightRadius number
  
  borderBottomLeftRadius number
   
  
  
  borderBottomRightRadius number
  
  borderStyle enum('solid', 'dotted', 'dashed')
  
  borderWidth number
  
  borderTopWidth number
  
  borderRightWidth number
  
  borderBottomWidth number
  
  borderLeftWidth number
  
  opacity number
  
  overflow enum('visible', 'hidden')
  
  android elevation number
  (限Android)使用Android原生的 elevation API來設定檢視的高度（elevation）。這樣可以為檢視新增一個投影，並且會影響檢視層疊的順序。此屬性僅支援Android5.0及以上版本。

• 用法

  View用法與LinearLayout一致，唯一的區別在於自身可定製的屬性不同,下面結合程式碼介紹，見註釋：

/**
 * Created by liyanxi on 2016/11/28.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';
export default class WelcomDemo extends Component {
    render() {
        return (
              //JSX語法
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.android.js
                </Text>
                <Text style={styles.instructions}>
                    Double tap R on your keyboard to reload,{'\n'}
                    Shake or press menu button for dev menu
                </Text>
            </View>
        );
    }
}
//樣式
const styles = StyleSheet.create({
    container: {    //預設垂直排列 flexDirection: 'column';
        flex: 1,
        justifyContent: 'center',   //內部child 主軸方向居中
        alignItems: 'center',       //內部child 次軸（垂直主軸方向：此處為列）方向居中
        backgroundColor: '#F5FCFF',//背景顏色
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

注：完整程式碼見底部

2.Text 文字元件

一個用於顯示文字的React元件，並且它也支援巢狀、樣式，以及觸控處理。

• 自身屬性

  • numberOfLines number 用來當文字過長的時候裁剪文字。包括摺疊產生的換行在內，總的行數不會超過這個屬性的限制。
  • onLongPress function 當文字長按後呼叫此方法
  • onPress function 當文字點選後呼叫此方法
  • selectable function 決定使用者是否可以長按選擇文字，以便複製和貼上。

• 樣式style

  View#style…

  color string
  
  fontFamily string
  
  fontSize number
  
  fontStyle enum('normal', 'italic')
  
  fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
  
  指定字型的粗細。大多數字體都支援'normal'和'bold'值。並非所有字型都支援所有的數字值。如果某個值不支援，則會自動選擇最接近的值。
  
  letterSpacing number
  
  lineHeight number
  
  textAlign enum("auto", 'left', 'right', 'center', 'justify')
  
  指定文字的對齊方式。其中'justify'值僅iOS支援。 

• 注意事項

  1. 巢狀文字（扁平格式，可繼承父類的樣式: 僅限於文字標籤的子樹）
  2. 作為容器（導致子文字元件Text元素在佈局上不同於其它元件：在Text內部的元素不再使用flexbox佈局，而是採用文字佈局。這意味著內部的元素不再是一個個矩形，而可能會在行末進行摺疊。）

  <Text>
  <Text>First part and </Text>
  <Text>second part</Text>
  </Text>
  // Text container: all the text flows as if it was one
  // |First part |
  // |and second |
  // |part       |
  <View>
  <Text>First part and </Text>
  <Text>second part</Text>
  </View>
  // View container: each text is its own block
  // |First part |
  // |and        |
  // |second part|

3.Image 圖片元件

一個用於顯示多種不同型別圖片的React元件，包括網路圖片、靜態資源、臨時的本地圖片、以及本地磁碟上的圖片（如相簿）等。詳細用法參閱圖片文件。

render() {
  return (
    <View>
      <Image
        style={styles.icon}
        source={require('./icon.png')}
      />
      <Image
        style={styles.logo}
        source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
      />
    </View>
  );
}

• 主要屬性

  • resizeMode enum(‘cover’,’contain’,’stretch’); 決定當元件尺寸和圖片尺寸不成比例的時候如何調整圖片的大小

  cover: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都大於等於容器檢視的尺寸（如果容器有padding內襯的話，則相應減去）。譯註：這樣圖片完全覆蓋甚至超出容器，容器中不留任何空白。

  contain: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小於等於容器檢視的尺寸（如果容器有padding內襯的話，則相應減去）。譯註：這樣圖片完全被包裹在容器中，容器中可能留有空白

  stretch: 拉伸圖片且不維持寬高比，直到寬高都剛好填滿容器。

  • source {uri: string}, number

  uri是一個表示圖片的資源標識的字串，它可以是一個http地址或是一個本地檔案路徑（使用require(相對路徑)來引用）。

• 樣式此處不作詳解，大同小異（同flexbox、shadow、transforms）

4. TextInput 輸入元件

TextInput是一個允許使用者在應用中通過鍵盤輸入文字的基本元件。本元件的屬性提供了多種特性的配置，譬如自動完成、自動大小寫、佔位文字，以及多種不同的鍵盤型別（如純數字鍵盤）等等。

最簡單的用法就是丟一個TextInput到應用裡，然後訂閱它的onChangeText事件來讀取使用者的輸入。它還有一些其它的事件，譬如onSubmitEditing和onFocus。一個簡單官網的例子如下：

import React, { Component } from 'react';
import { AppRegistry, TextInput } from 'react-native';

class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Useless Placeholder' };
  }
  render() {
    return (
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
    );
  }
}
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);

注意1: 有些屬性僅在multiline為true或者為false的時候有效。此外，當multiline=false時，為元素的某一個邊新增邊框樣式（例如：borderBottomColor，borderLeftWidth等）將不會生效。為了能夠實現效果你可以使用一個View來包裹TextInput.

注意2:TextInput有一個預設的底部邊框，不可以改變。避免這種情況的解決方案是要麼不顯式地設定高度,這種情況系統將照顧邊界顯示在正確的位置,或則設定底部border邊框顏色透明即underlineColorAndroid

另一方面：可以通過設定app內Activity的windowSoftInputMode屬性（adjustResize等）調整軟鍵盤的位置以及介面的展示具體參考Activity屬性設定;

• 屬性列表介紹

5. ScrollView 元件

記住ScrollView必須有一個確定的高度才能正常工作，因為它實際上所做的就是將一系列不確定高度的子元件裝進一個確定高度的容器（通過滾動操作）。要給一個ScrollView確定一個高度的話，要麼直接給它設定高度（不建議），要麼確定所有的父容器的高度都是有界的。在檢視棧的任意一個位置忘記使用{flex:1}都會導致錯誤，你可以使用元素檢視器來查詢問題的原因。ScrollView內部的其他響應者尚無法阻止ScrollView本身成為響應者。

• 主要屬性列表介紹