React Native填坑之旅--ListView篇

列表顯示數據，基本什麼應用都是必須。今天就來從淺到深的看看React Native的ListView怎麼使用。筆者寫作的時候RN版本是0.34。

最簡單的

//@flow

import React from 'react';
import {
  Text,
  View,
  ListView
} from 'react-native';

export default class DemoList extends React.Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2'])
    };
  }

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>} />
    );
  }
}

引入所需要的內置組件之類的就不多說了。

第一步，在constructor裏設置數據源，並同時指定什麼時候重新繪製一行，就是在這個時候(r1, r2) => r1 !== r2}重繪。

之後，在state裏面設置數據源。下面從網絡請求數據的時候state的作用就更加明顯了。RN的組件在state發生改變的時候就會重繪。這個下面會詳細解釋。

最後，在render方法裏返回ListView，這裏的props裏有一個renderRow。在這裏指定的代碼就是把數據源中每一行的數據繪製在Text裏。

一步一步接近實際產品開發

下面就把繪製行的部分抽象出來。在Native應用的開發中，無論是iOS還是Android，行繪製的部分都是單獨出來的。在RN裏雖然可以不獨立出來，但是你也看到了，這樣的寫法遇到稍微複雜一點的行內容的時候就捉襟見肘了。不獨立出來行繪製部分代碼會很難維護。

這部分不復雜，獨立出來以後是這樣的：

import //...略...

export default class DemoList extends React.Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2'])
    };

    //bind
    this._renderRow = this._renderRow.bind(this);
  }

  _renderRow(rowData) {
    return (
      <View style={{height: 50}}>
        <Text>{rowData}</Text>
      </View>
    );
  }

  render() {
    return (
      <ListView dataSource={this.state.dataSource}
        renderRow={this._renderRow} />
    );
  }
}

這個例子和上例基本上一樣。只是多了一個_renderRow(rowData)方法。

注意：在使用這個方法以前，一定要綁定：this._renderRow = this._renderRow.bind(this);。綁定也可以這樣<ListView dataSource={this.state.dataSource} renderRow={this._renderRow.bind(this)} />。

在繪製行的時候，比之前稍微有一點改動。行文本的外面套了一個View，並指定這個View的高度爲50。

加上裝飾

從現在來看，數據只有兩行。如果不滑動一下的話，看起來和兩個上下排列的Text沒有什麼區別。

首先我們加一個分割線：

export default class DemoList extends React.Component {
  constructor() {
    //記得使用方法之前綁定
    this._renderSeparator = this._renderSeparator.bind(this);
  }
  _renderRow(rowData) {
    // ...略...
  }

  _renderSeparator(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
    return (
      <View key={`{sectionID}-${rowID}`}
        style={{height: 1, backgroundColor: 'black'}}>
      </View>
    );
  }
  render() {
    return (
      <ListView dataSource={this.state.dataSource}
        renderRow={this._renderRow}
        renderSeparator={this._renderSeparator}
        />
    );
  }
}

這裏需要額外說明一些，在方法裏_renderSeparator(sectionID: number, rowID: number, adjacentRowHighlighted: bool)我看看到了在參數的名稱後面都有類型的說明。這個不是ES6的也不是js裏的，而是FB自己搞的一套靜態類型檢查工具裏的定義。這個工具叫Flow。

如果你從一開始就沒打算跟flow扯上任何關係，那麼就按照ES標準寫就好。

至於分割線也是非常簡單。我們這就返回了一個高度一個像素的，背景色爲黑色的view。

點擊和高亮

Row的點擊不想Native那樣，默認的一般就有了。在RN裏，我們需要手動賦予一行可以被點擊的功能。

  _renderRow(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {
    return (
      <TouchableHighlight onPress={() => {
        this._pressRow(rowID);
        highlightRow(sectionID, rowID);
      }}>
        <View style={styles.row}>
          <Text style={styles.text}>{rowData}</Text>
        </View>
      </TouchableHighlight>
    );
  }

在RN裏處理一般點擊的不二選擇就是TouchableHighlight。在TouchableHighlight裏的onPress裏調用自定義的_pressRow方法處理點擊，highlightRow方法高亮行。

當然，這裏就少不了用到樣式了：

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#F6F6F6',
  },
  text: {
    flex: 1,
  },
  seperator: {
    height: 1,
    backgroundColor: '#CCCCCC'
  }
});

把Cell分離

在實際的開發中，一般沒有人會把Row（或者行）的繪製和ListView放在一起。我們這裏就演示如何把Row的繪製分離出去。

首先創建一個單獨的文件，定義Cell：

import React from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  StyleSheet
} from 'react-native';


export default class DemoCell extends React.Component {
  render() {
    return (
      <View>
        <TouchableHighlight onPress={this.props.onSelect}>
          <View style={styles.row}>
            <Text style={styles.text}>{this.props.rowData}</Text>
          </View>
        </TouchableHighlight>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#F6F6F6',
  },
  text: {
    flex: 1,
  },
});

Row也是一個組件，是一個組件就可以在另外的組建裏渲染。所以，單獨定義的Row就是這麼用的。

回到demoList.js文件。在_renderRow方法中修改代碼：

  _renderRow(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {
    return (
      // <TouchableHighlight onPress={() => {
      //   this._pressRow(rowID);
      //   highlightRow(sectionID, rowID);
      // }}>
      //   <View style={styles.row}>
      //     <Text style={styles.text}>{rowData}</Text>
      //   </View>
      // </TouchableHighlight>
      <DemoCell onSelect={() => {
         this._pressRow(rowID);
         highlightRow(sectionID, rowID);
       }} rowData={rowData}/>
    );
  }

填坑完畢

以上就是處理ListView和其中的Cell的一些常見問題的方法。