ReactNative之ListView（八）

前言

眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.

如果喜欢我的文章，可以关注我微博:袁峥Seemygo

ListView原理

• ListView内部是通过ListViewDataSource这个对象，显示数据，因此使用ListView必须先创建ListViewDataSource对象。
• ListViewDataSource构造方法(创建对象):可选择性传入4个参数,描述怎么提取数据，怎么刷新cell
• 这些参数：都是函数，当产生对应的事件的时候，会自动执行这些函数.

构造函数可以接受下列四种参数（都是可选）：

getRowData(dataBlob, sectionID, rowID);
getSectionHeaderData(dataBlob, sectionID);
rowHasChanged(prevRowData, nextRowData);
sectionHeaderHasChanged(prevSectionData, nextSectionData);

• ListViewDataSource为ListView组件提供高性能的数据处理和访问。我们需要调用clone方法从原始输入数据中抽取数据来创建ListViewDataSource对象。
• 要更新datasource中的数据，请（每次都重新）调用cloneWithRows方法（如果用到了section，则对应cloneWithRowsAndSections方法）clone方法会自动提取新数据并进行逐行对比（使用rowHasChanged方法中的策略），这样ListView就知道哪些行需要重新渲染了

ListView基本使用步骤

• 1.创建数据源，但还没有给它传递数据
  • 使用state保存数据源，因为数据源的数据改变的时候，需要刷新界面。
  • ListView.DataSource:获取ListViewDataSource构造方法
  • ListViewDataSource构造方法:决定ListView怎么去处理数据，需要传入一个对象，这个对象有四个可选属性，都是方法
    • getRowData(dataBlob, sectionID, rowID); 怎么获取行数据
    • getSectionHeaderData(dataBlob, sectionID); 怎么获取每一组头部数据
    • rowHasChanged(prevRowData, nextRowData); 决定什么情况行数据才发生改变，当行数据发生改变，就会绘制下一行cell
    • sectionHeaderHasChanged(prevSectionData, nextSectionData);决定什么情况头部数据才发生改变，当行数据发生改变，就会绘制下一行cell
  • 注意：初始化ListViewDataSource的时候，如果不需要修改提取数据的方式，只需要实现rowHasChanged，告诉什么时候刷新下一行数据.
  • 注意：默认ListViewDataSource有提取数据方式，可以使用默认的提取方式.

constructor(props) {
  super(props);
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
 }

• 2.给数据源设置数据

constructor(props) {
  super(props);
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  
  this.state = {
     // 给数据源设置数据,创建新的数据,不过保存了之前的行改变方法属性
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
  };
 }

• 3.实现数据源方法，确定cell
  • 这个方法会自动传入四个参数(rowData,sectionID,rowID,highlightRow)
  • rowData:当前行数据
  • sectionID:当前行所在组ID
  • rowID：哪一行的角标
  • highlightRow:高亮函数

render() {
        return (

            <View style={{flex:1}}>
                <ListView dataSource={this.state.ds}
                          renderRow={this._renderRow.bind(this)}
                />
            </View>
        )

    }

    // 实现数据源方法,每行cell外观
    _renderRow(rowData, sectionID, rowID, highlightRow) {
        return (
            <View>
                <Text>{rowData}</Text>
            </View>
        );
    }

ListView分割线

 // 哪一组,哪一行,相邻行是否高亮
    _renderSeparator(sectionID, rowID, adjacentRowHighlighted)  {
        console.log(sectionID,rowID,adjacentRowHighlighted);
        return (
            <View style={{height:1,backgroundColor:'black'}}></View>
        )
    }

ListView头部视图

 _renderHeader() {
        return (
            <View>
                <Text>头部视图</Text>
            </View>
        )
    }

ListView尾部视图

 _renderFooter() {
        return (
            <View>
                <Text>尾部视图</Text>
            </View>
        )
    }

ListView点击cell高亮

    _renderRow(rowData, sectionID, rowID, highlightRow) {

        return (
            <TouchableOpacity onPress={()=>{
                AlertIOS.alert(rowID);
                highlightRow(sectionID,rowID)
            }}>
                <View>
                    <Text>{rowData}</Text>
                </View>
            </TouchableOpacity>

        );
    }