quanshuList.js 4.1 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11
/**
 * 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';

吴强's avatar
吴强 committed
12
@connect(({ QSInfo }) => ({ QSInfo/* , loading: !!loading.effects['obligeeInfo/getObligeeInfo'] */ }))
13 14 15
class QuanshuList extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
16
    dispatch(createAction('QSInfo/getQSList')({ clear: '', pQuanShuBianMa: this.props.QSInfo.searchValue }));
17
  }
18 19
  onSearchSubmit = (pQuanShuBianMa) => {
    this.props.dispatch(createAction('QSInfo/getQSList')({ clear: 'clear', pQuanShuBianMa }));
20
  };
21 22
  onSearchChange = (pQuanShuBianMa) => {
    this.props.dispatch(createAction('QSInfo/setSearchValue')(pQuanShuBianMa));
23 24 25 26 27 28
  };
  // 上拉加载更多
  onEndReached = () => {
    // 以下是制造新数据
    if (!this.props.loading) {
      // console.info('执行了上啦加载');
29
      this.props.dispatch(createAction('QSInfo/getQSList')({ clear: '', pQuanShuBianMa: this.props.QSInfo.searchValue }));
30 31 32
    }
  };
  onPressItem = (id) => {
吴强's avatar
吴强 committed
33
    this.props.dispatch(createAction('QSInfo/jumpPage')(id));
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
  };
  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) {
68
      this.props.dispatch(createAction('QSInfo/getQSList')({ clear: 'clear', pQuanShuBianMa: this.props.QSInfo.searchValue }));
69 70 71 72 73 74 75 76 77 78 79 80 81
    }
  };
  /**
   * 使用箭头函数防止不必要的re-render;
   * 如果使用bind方式来绑定onPressItem,每次都会生成一个新的函数,导致props在===比较时返回false,
   * 从而触发自身的一次不必要的重新render,也就是FlatListItem组件每次都会重新渲染。
   *
   * @param id
   * @private
   */
  renderItem = ({ item }) => {
    return (
      <FlatListItem
吴强's avatar
吴强 committed
82
        height={120}
83
        title={item.quanShuBianMa}
吴强's avatar
吴强 committed
84
        meta={this.props.QSInfo.metas}
85 86 87 88 89 90 91 92 93 94 95
        item={item}
        onPressItem={this.onPressItem}
      />
    );
  };

  render() {
    return (
      <View>
        <SearchComponent onSearchSubmit={this.onSearchSubmit} onSearchChange={this.onSearchChange} />
        <FlatList
吴强's avatar
吴强 committed
96
          data={this.props.QSInfo.sourceData}
97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
          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;