ReactNative列表ListView的用法

2019-11-19 15:55:07

字體：大中小

供稿：網(wǎng)友

最近在學(xué)習(xí)ReactNative，本文介紹了ReactNative列表ListView的用法，分享給大家，也給自己留個(gè)筆記

ListView

在Android中，如果我們需要顯示一個(gè)ListView，有兩項(xiàng)是比不可少的，首先是ListView的數(shù)據(jù)源，其次是ListView每個(gè)item的樣式。ReactNative中一樣。首先我們來(lái)看一個(gè)簡(jiǎn)單的例子：

  constructor(props) {   super(props);   var 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>}    />   );  },

在render()中，我們渲染一個(gè)ListView，在ListView的屬性中，我們指定了dataSource和renderRow，這兩個(gè)屬性分別代表ListView的數(shù)據(jù)源和渲染的每一行。

dataSource

如果我們要?jiǎng)?chuàng)建一個(gè)數(shù)據(jù)源，最基本的方法就是創(chuàng)建一個(gè)ListView.DataSource數(shù)據(jù)源，然后通過(guò)cloneWithRows方法為其傳遞一個(gè)數(shù)組。

其中提供給數(shù)據(jù)源的rowHasChanged函數(shù)可以告訴ListView它是否需要重繪一行數(shù)據(jù)，即數(shù)據(jù)是否發(fā)生了改變，即在需要重繪界面的時(shí)候會(huì)進(jìn)行判斷，如果之前頁(yè)面中的改行數(shù)據(jù)沒(méi)有發(fā)生變化，則不再進(jìn)行重繪，否則進(jìn)行重繪。

如上述代碼，我們對(duì)數(shù)據(jù)源設(shè)置數(shù)據(jù)時(shí)直接傳入一個(gè)數(shù)組，當(dāng)然我們也可以通過(guò)一個(gè)獲取數(shù)據(jù)的方法，在設(shè)置數(shù)據(jù)的時(shí)候調(diào)用方法即可：

  constructor(props){    super(props);    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});    this.state = {      dataSource: ds.cloneWithRows(this._genRows()),    };  }  _genRows(){    const dataBlob = [];    for(let i = 0 ; i< 200 ; i ++ ){      dataBlob.push("aa"+i);    }    return dataBlob;  }

這樣通過(guò)方法獲取數(shù)據(jù)，方便我們進(jìn)行一些邏輯的處理。

renderRow

(rowData, sectionID, rowID, highlightRow) => renderable

該屬性需要傳入一個(gè)方法，該方法如上所示，他會(huì)從數(shù)據(jù)源中接受一條數(shù)據(jù)，以及他和他所在的section的Id，返回一個(gè)可渲染的組件來(lái)為這行數(shù)據(jù)進(jìn)行渲染，默認(rèn)情況下參數(shù)中的數(shù)據(jù)就是放進(jìn)數(shù)據(jù)源中的數(shù)據(jù)本身，不過(guò)也可以提供一些轉(zhuǎn)換器。

如果某一行正在被高亮（通過(guò)調(diào)用highlightRow函數(shù)），ListView會(huì)得到相應(yīng)的通知。當(dāng)一行被高亮?xí)r，其兩側(cè)的分割線會(huì)被隱藏。行的高亮狀態(tài)可以通過(guò)調(diào)用highlightRow(null)來(lái)重置。

  _renderRow(rowData, sectionID, rowID){    return (        <View>          <Text>{"rowData:"+rowData+"  rowId:"+rowID}</Text>        </View>      );  }  render() {   return (    <ListView     dataSource={this.state.dataSource}     renderRow={this._renderRow}    />   );  },

因?yàn)閞enderRow中的方法會(huì)自動(dòng)接受從數(shù)據(jù)源中的一條數(shù)據(jù)，因此我們可以通過(guò)調(diào)用外部方法的方式進(jìn)行實(shí)現(xiàn)，同時(shí)只需要在外部方法的參數(shù)中傳入我們需要從數(shù)據(jù)源中獲取的數(shù)據(jù)即可，如上代碼所示。

當(dāng)我們需要實(shí)現(xiàn)比較復(fù)雜的布局時(shí)，也可以通過(guò)導(dǎo)入外部組件的方式作為L(zhǎng)istView的每一行的樣式。

例如我們自定義了一個(gè)組件Item_MyListView,我們需要在文件開(kāi)頭通過(guò)import方式將其導(dǎo)入到當(dāng)前組件中：

 import Item_MyListView from './Item_MyListView';

然后就可以通過(guò)導(dǎo)入的名稱直接使用我們導(dǎo)入的組件了：

  _renderRow(rowData, sectionID, rowID){    return (      <TouchableOpacity onPress={this._pressRow}>        <View>          <Text>{"rowData:"+rowData+"  rowId:"+rowID}</Text>          <Item_MyListView></Item_MyListView>        </View>      </TouchableOpacity>      );  }

ListView的點(diǎn)擊

當(dāng)我們需要給ListView的每一行添加點(diǎn)擊事件時(shí)，只需要在其外層包裹一層TouchableOpacity或者TouchableHighlight，定義好onPress方法即可。

如下代碼所示：

  _pressRow(rowID){    alert("hellow"+rowID);  }  _renderRow(rowData, sectionID, rowID){    return (      <TouchableOpacity onPress={()=>this._pressRow(rowID)}>        <View>          <Text>{"rowData:"+rowData+"  rowId:"+rowID}</Text>          <Item_MyListView info={rowData}></Item_MyListView>        </View>      </TouchableOpacity>      );  }

需要注意的是，在ListView的renderRow屬性中調(diào)用_renderRow一定要綁定this，否則onPress中的this就會(huì)指向錯(cuò)誤，如下所示：

復(fù)制代碼代碼如下:

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

完整代碼如下所示：

import React,{  View,  Text,  TouchableOpacity,  ListView,} from 'react-native';import Item_MyListView from './Item_MyListView';export default class SecondPageComponent extends React.Component{  constructor(props){    super(props);    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});    this.state = {      dataSource: ds.cloneWithRows(this._genRows()),    };  }  _genRows(){    const dataBlob = [];    for(let i = 0 ; i< 200 ; i ++ ){      dataBlob.push("aa"+i);    }    return dataBlob;  }  _pressRow(rowID){    alert("hellow"+rowID);  }  _renderRow(rowData, sectionID, rowID){    return (      <TouchableOpacity onPress={()=>this._pressRow(rowID)}>        <View>        <Text>{"rowData:"+rowData+"  rowId:"+rowID}</Text>        <Item_MyListView info={rowData}></Item_MyListView>        </View>      </TouchableOpacity>      );  }  render(){    return (      <View style={{flex:1,}}>        <ListView dataSource={this.state.dataSource} renderRow={this._renderRow.bind(this)}/>      </View>      );  }}

其中Item_MyListView只是隨意定義了一個(gè)組件，沒(méi)什么實(shí)際意義，就不再展示。

最終效果如下圖所示：