quanshuList.js

/**
 * Created by zhouhuan on 2017/11/13.
 */
import React, { Component } from 'react';
import { Text, FlatList, View } from 'react-native';
import { WingBlank, WhiteSpace } from 'antd-mobile';
import { connect } from 'react-redux';
import { createAction } from '../../../utils/index';
import FlatListItem from '../../../components/FlatListItem';
import SearchComponent from '../../../components/searchComponent';

@connect(({ QSInfo }) => ({ QSInfo/* , loading: !!loading.effects['obligeeInfo/getObligeeInfo'] */ }))
class QuanshuList extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(createAction('QSInfo/getQSList')({ clear: '', pQuanShuBianMa: this.props.QSInfo.searchValue }));
  }
  onSearchSubmit = (pQuanShuBianMa) => {
    this.props.dispatch(createAction('QSInfo/getQSList')({ clear: 'clear', pQuanShuBianMa }));
  };
  onSearchChange = (pQuanShuBianMa) => {
    this.props.dispatch(createAction('QSInfo/setSearchValue')(pQuanShuBianMa));
  };
  // 上拉加载更多
  onEndReached = () => {
    // 以下是制造新数据
    if (!this.props.loading) {
      // console.info('执行了上啦加载');
      this.props.dispatch(createAction('QSInfo/getQSList')({ clear: '', pQuanShuBianMa: this.props.QSInfo.searchValue }));
    }
  };
  onPressItem = (id) => {
    this.props.dispatch(createAction('QSInfo/jumpPage')(id));
  };
  getItemLayout = (data, index) => (
    { length: 120, offset: (120 + 1) * index, index }
  );
  /**
   * 此函数用于为给定的item生成一个不重复的Key。
   * Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。
   * 若不指定此函数，则默认抽取item.key作为key值。
   * 若item.key也不存在，则使用数组下标
   *
   * @param item
   * @private
   */
  // 这里指定使用数组下标作为唯一索引
  keyExtractor = item => `${item.id}`;
  // Footer布局
  renderFooter = () => (
    <WingBlank size="lg">
      <WhiteSpace size="lg" />
      <Text>到底了！！！</Text>
      <WhiteSpace size="lg" />
    </WingBlank>
  );
  // 空布局
  renderEmptyView = () => (
    <WingBlank size="lg">
      <WhiteSpace size="lg" />
      <Text>当前无内容</Text>
      <WhiteSpace size="lg" />
    </WingBlank>
  );
  // 下拉刷新
  renderRefresh = () => {
    if (!this.props.loading) {
      this.props.dispatch(createAction('QSInfo/getQSList')({ clear: 'clear', pQuanShuBianMa: this.props.QSInfo.searchValue }));
    }
  };
  /**
   * 使用箭头函数防止不必要的re-render；
   * 如果使用bind方式来绑定onPressItem，每次都会生成一个新的函数，导致props在===比较时返回false，
   * 从而触发自身的一次不必要的重新render，也就是FlatListItem组件每次都会重新渲染。
   *
   * @param id
   * @private
   */
  renderItem = ({ item }) => {
    return (
      <FlatListItem
        height={120}
        title={item.quanShuBianMa}
        meta={this.props.QSInfo.metas}
        item={item}
        onPressItem={this.onPressItem}
      />
    );
  };

  render() {
    return (
      <View>
        <SearchComponent onSearchSubmit={this.onSearchSubmit} onSearchChange={this.onSearchChange} />
        <FlatList
          data={this.props.QSInfo.sourceData}
          keyExtractor={this.keyExtractor}
          renderItem={this.renderItem}
          // 决定当距离内容最底部还有多远时触发onEndReached回调；数值范围0~1，例如：0.5表示可见布局的最底端距离content最底端等于可见布局一半高度的时候调用该回调
          onEndReachedThreshold={0.3}
          // 当列表被滚动到距离内容最底部不足onEndReacchedThreshold设置的距离时调用
          onEndReached={this.onEndReached}
          ListFooterComponent={this.renderFooter}
          ListEmptyComponent={this.renderEmptyView}
          refreshing={this.props.loading || false}
          onRefresh={this.renderRefresh}

          // 是一个可选的优化，用于避免动态测量内容，+1是加上分割线的高度
        />
      </View>
    );
  }
}
export default QuanshuList;