ListView

建議使用FlatList

官方文檔 中文 React Native Express

  • DataSource

    用於為ListView指定當前的數據源要更新的數據源中的數據，請（每次都重新）調用cloneWithRows方法（如果用到了section，則對應cloneWithRowsAndSections方法） 數據源中的數據本身是不可修改的，所以請勿直接嘗試修改 clone方法會自動提取新數據並進行逐行對比（使用rowHasChanged方法中的策略），這樣的ListView就知道哪些行需要重新渲染了!!

  • rowHasChanged

    此函數告訴ListView它是否需要重新繪製一行數據

  • cloneWithRows

    接收一個數組，根據該數組創建接收一個數組，根據該數組創建數據源

  • renderRow

    標示ListView中每一行需要顯示的樣子 參數表示當前需要顯示的數據

Sample Code

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

export default class ListView1Demo extends Component {
  constructor(props){
    super(props)
    // 創建dataSource對象，判斷row更新與否
    var ds = new ListView.DataSource({
      rowHasChanged:(r1, r2) => r1 !== r2
    })
    //初始化dataSource，後面建構listview的時候需要用到。
    this.state = {
      dataSource: ds
    }
  }

  //在render方法裡面建構listview
  render() {
    return (
      <View style={styles.container}>
        <ListView
          //设置datasource
          dataSource = {this.state.dataSource.cloneWithRows(this.generateRowData())}

          //渲染row
          renderRow = {(rowData) => <Text>{rowData}</Text> }
        />
      </View>
    );
  }

  //產生listview內的資料
  generateRowData() {
    var data = [];
    for (var i = 0; i < 100; i++) {
      var text = "this is item :" +i;
      data.push(text);
    }
    return data;
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 30,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

Section Sample

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

export default class SectionListViewDemo extends Component {
  constructor(props){
    super(props)
    var ds = new ListView.DataSource({
      //創建dataSource對象，判斷row更新與否
      rowHasChanged:(r1, r2) => r1 !== r2,
      //更新section的規則
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
    })

    this.state = {
      sectionHeader: 'Hello',
      dataSource: ds,
      //這裡使用了字典的方式，那麼會自動將字典的key作為section的部分顯示出來
      data: {a:this.generateRowData('a'), b:['l', 'f', 'b1', 'b2'], c:['c', 'cd1', 'c2', 'c3'], d:['l', 'i'], e:this.generateRowData('e')}
    }
  }

renderRow(rowData, rowId, sectionId) {
  return (
    <Text>{`${rowData}, index of section:${sectionId}`}</Text>
  );
}
  //然后在render方法里面构建listview
  render() {
    return (
      <View style={styles.container}>
         <Text style={styles.header}>{this.state.sectionHeader}</Text> 

        <ListView
          //设置datasource
          dataSource = {this.state.dataSource.cloneWithRowsAndSections(this.state.data)}
          //下方是 指定section
          //dataSource = {this.state.dataSource.cloneWithRowsAndSections(this.state.data, ['a'])}

          //section Header. but ios & android something Differences
          renderSectionHeader={(sectionData,sectionID)=>  
            <View style={styles.section}><Text>{sectionID}</Text></View>}

          //renderRow方法的參數默認按照順序如下 (rowData, sectionID, rowID, highlightRow)
          renderRow = {(rowData, sectionId, rowId) => 
            this.renderRow( rowData, sectionId, rowId)}
        />
      </View>
    );
  }

  //產生listview內的資料
  generateRowData(sectionName) {
    var data = [];
    for (var i = 0; i < 25; i++) {
      var text = `${sectionName} - ${i}`;
      data.push(text);
    }
    return data;
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 30,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  section: {
    alignItems: 'center',
    backgroundColor: 'skyblue'
  },
  header: {
    // position: 'absolute',
    // top: 0,
    // zIndex: 1,
  }
});

參考

PreviousFlatListNext.SectionList

Last updated