• FlatList


    ListView问题:

      

     FlatList是基于VirtualizedList的。

     

     

     

    https://www.jianshu.com/p/47a2ad2bf527    FlatList属性详解

     FlatList:注意第一批次渲染的元素不会在滑动过程中被卸载,这样是为了保证 用户执行返回顶部的操作时,不需要重新渲染首批元素。

        initialNumToRender:number 指定一开始渲染的元素数量,最好刚刚够填满一个屏幕。

        itemSeparatorComponent?:?ReactClass<any>行与行之间的分割线 组件。不会出现在第一行之前和最后一行之后。

        ListFooterComponent?:?ReactClass<any>设置尾部组件。

        ListHeaderComponent?:?ReactClass<any>设置头部组件。

        extraData?:any 如果有除data以外的数据用在列表中(不论是用在 renderItem还是Header或者 Footer中),请在此属性中指定。此数据修改时需要先修改其引用地址,然后再修改其值,否则界面很可能不会刷新。

        getItemLayout是一个可选的优化,用于避免动态测量内容尺寸的开销,不过前提是你可以提前知道内容的高度。

          getItemLayout={(data,index)=>( {length:行高,offset:行高*index,index } )}

          注意如果你指定了SeparatorComponent,请把分割线的尺寸也 考虑到offset的计算之中。

        legacyImplementation?:?bollean 设置为true 则使用旧的ListView的实现。

        numColumns:number 多列布局 只能在非水平模式下使用,即必须是horizontal={false}。此时组件内元素会从左到右从上到下按Z字形排列,类似启用了flexWrap的布局。组件内元素必须是等高的——暂时还无法支持瀑布流布局。

        检测用户滚动到底部的距离和需要执行的函数:

     检测可见行元素变化时的配置和执行函数:

    FlatList方法:

      scrollToEnd(params?:object)

      滚动到底部调用。如果 不设置getItemLayout属性的话,可能会比较卡。

      scrollToIndex(params:object)

      滚动到指定位置,如果不设置getItemLayout属性的话,可能会比较卡。

      scrollToItem(params:object)

      需要线性扫描数据——如果可能,请使用scrollToIndex。如果不设置getItemLayout属性的话 只能滚动到当前渲染窗口的某个位置。

      scrollToOffset(params:object)

      滚动到列表中特定内容像素偏移量。

      recordInteraction()待定

    实例:(不可直接使用)

    import React from 'react';
    import {Map, FlatList} from 'react-native';
    class MyListItem extends React.PureComponent {
      _onPress = () => {
        this.props.onPressItem(this.props.id);
      };
      render() {
        return <SomeOtherWidget {...this.props} onPress={this._onPress} />;
      }
    }
    class MyList extends React.PureComponent {
      state = {selected: new Map()};
      _keyExtractor = (item, index) => item.id;
      _onPressItem = id => {
        this.setState(state => {
          const selected = new Map(state.selected);
          selected.set(id, !selected.get(id));
          return {selected};
        });
      };
      _renderItem = ({item}) => (
        <MyListItem
          id={item.id}
          onPressItem={this._onPressItem}
          selected={!!this.state.selected.get(item.id)}
          title={item.title}
        />
      );
      render() {
        return (
          <FlatList
            data={this.props.data}
            extraData={this.state}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem}
          />
        );
      }
    }

    解析:

      组件继承自PureComponent而非通常的Component,这意味着如果其props在浅比较中是相等的,则不会重新渲染。

      对于MyListItem组件来说,其 onPressItem属性使用箭头函数 而非bind的方式进行绑定,使其不会在每次列表重新render时生成一个新的函数,从而保证了props的不变性(当然前提是id、selected和title也没变),不会触发自身无畏的重新render。

      给 FlatList指定extraData={this.state}属性,是为了保证state.selected变化时,能够正确触发FlatList的更新。如果不指定此属性,则FlatList不会触发更新,因为它是一个pureComponent,其props在===比较中没有变化则不会触发更新。

      

      

  • 相关阅读:
    ios之单例模式
    ios之申请后台延时执行和做一个假后台的方法
    ios之gcd浅析
    ios之归档demo
    ios之快速领会VFL的demo
    ios之网络异常与正常视图的切换
    POJ 2280 Amphiphilic Carbon Molecules 极角排序 + 扫描线
    linux pthread
    directdraw显示yuv422(yuy2)
    nginx高效学习方法
  • 原文地址:https://www.cnblogs.com/em2464/p/12193534.html
Copyright © 2020-2023  润新知