React Native 學習指南（三） - 把玩更多UI組件

在以前的天氣小應用實戰中，咱們已經基本瞭解一些基礎組件的使用：<View>、<Text>、<Image>，接下來咱們經過官方示例 UIExplorer 看看觸摸和手勢這樣在移動設備上的經常使用操做將怎樣在 React Native 中實現，再嘗試 <ListView>、<TabView>、<NavigatorView> 這些進階組件。

官方示例 UIExplorer

觸控操做 (TouchableHighlight)

要讓組件實現觸控操做，使用 <TouchableHighlight> 對組件進行包裝便可，並制定 onPress 等操做響應方法。

// 參見 https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/TouchableExample.js

<TouchableHighlight
    style={styles.wrapper}
    onPress={() => console.log('stock THW image - highlight')}>
    <Image source={heartImage} style={styles.image}/> </TouchableHighlight>複製代碼

手勢響應 (GestureResponder)

和 iOS 中手勢系統同樣，GestureResponder 是一個相對抽象的底層接口，這裏咱們將經過了解基於此的更高層實現的 PanResponder 來理解手勢響應。

不一樣於 <TouchableHighlight>, PanResponder 並非組件，而是一個類。

_panResponder: {}, // 聲明一個 PanResponder 變量

// 建立 PanRespondre 實例，並實現相關響應操做方法
componentWillMount: function() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
      onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
      onPanResponderGrant: this._handlePanResponderGrant,
      onPanResponderMove: this._handlePanResponderMove,
      onPanResponderRelease: this._handlePanResponderEnd,
      onPanResponderTerminate: this._handlePanResponderEnd,
    });
},複製代碼

在 render 函數中給視圖組件添加手勢

render: function() {
    return (
      <View style={styles.container}> <View style={styles.circle} {...this._panResponder.panHandlers} /> </View>複製代碼

以上手勢觸控操做都只是參照官方示例作簡單梳理，更多具體的代碼實現可參見 UIExplorer

使用 <ListView> 組件

列表視圖，即 iOS 開發中的 TableView。

添加列表視圖組件，有兩個必要屬性： dataSource 和 renderRow，也就是數據源以及渲染列表單元組件。

getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(this._genRows({})),
    };
},

<ListView
    dataSource={this.state.dataSource}
    renderRow={this._renderRow}
/>

  _renderRow: function(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {
    var rowHash = Math.abs(hashCode(rowData));
    var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
    return (
      <TouchableHighlight onPress={() => {
          this._pressRow(rowID);
          highlightRow(sectionID, rowID);
        }}>
        <View>
          <View style={styles.row}>
            <Image style={styles.thumb} source={imgSource} />
            <Text style={styles.text}>
              {rowData + ' - ' + LOREM_IPSUM.substr(0, rowHash % 301 + 10)}
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  },

  _genRows: function(pressData: {[key: number]: boolean}): Array<string> {
    var dataBlob = [];
    for (var ii = 0; ii < 100; ii++) {
      var pressedText = pressData[ii] ? ' (pressed)' : '';
      dataBlob.push('Row ' + ii + pressedText);
    }
    return dataBlob;
  },複製代碼

原理和使用 UITableView 截然不同，熟悉了以後並不難理解。官方示例參見：ListViewExample.js

使用 Navigator

即相似 iOS 中的 NavigationController。容許應用在不一樣屏幕之間切換「場景（Scene）」，經過一個「棧」來維護場景的推入（push）和彈出（pop）。參見官方示例 Navigator

平臺特定組件

React-Native 的一大特色就是支持跨平臺開發，可是因爲 iOS 與 Android 交互方式之間存在差別，所以還須要針對不一樣平臺使用特定組件。通常這些平臺特定組件都有相應平臺的後綴標識，例如 <TabBarIOS> 和 <SwitchAndroid>。

總結

經過官方示例 UIExplorer ，咱們能夠了解更多更多組件來支持特定功能的實現。接下來，就要征戰最使人頭疼的樣式佈局了。