9,React Native之ListView

1,ListView組件用于顯示一個(gè)垂直的滾動(dòng)列表,其中的元素之間結(jié)構(gòu)近似而僅數(shù)據(jù)不同。
2,ListView更適于長(zhǎng)列表數(shù)據(jù),且元素個(gè)數(shù)可以增刪。和ScrollView不同的是,ListView并不立即渲染所有元素,而是優(yōu)先渲染屏幕上可見的元素。
3,ListView組件必須的兩個(gè)屬性是dataSource和renderRow。dataSource是列表的數(shù)據(jù)源,而renderRow則逐個(gè)解析數(shù)據(jù)源中的數(shù)據(jù),然后返回一個(gè)設(shè)定好格式的組件來(lái)渲染。
4,rowHasChanged函數(shù)也是ListView的必需屬性。這里我們只是簡(jiǎn)單的比較兩行數(shù)據(jù)是否是同一個(gè)數(shù)據(jù)(===符號(hào)只比較基本類型數(shù)據(jù)的值,和引用類型的地址)來(lái)判斷某行數(shù)據(jù)是否變化了。

export default class hyuxin extends Component {
// 初始化模擬數(shù)據(jù)
  constructor(props) {
    super(props);
    //rowHasChanged函數(shù)也是ListView的必需屬性。這里我們只是簡(jiǎn)單的比較兩行數(shù)據(jù)是否是同一個(gè)數(shù)據(jù)(===符號(hào)只比較基本類型數(shù)據(jù)的值,和引用類型的地址)來(lái)判斷某行數(shù)據(jù)是否變化了。
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ])
    };
  }
  render() {
    return (
        <View style={{flex: 1, paddingTop: 22}}>
          <ListView
              dataSource={this.state.dataSource}
              renderRow={(rowData) => <Text>{rowData}</Text>}
          />
        </View>
    );
  }

  }

暫時(shí)listView就寫這樣,后續(xù)會(huì)自己總結(jié)寫一個(gè)小demo
本文參考于http://reactnative.cn/docs/0.42/using-a-listview.html#content

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容