react-native的组件FlatList使用示例及注意事项

import React, { Component } from "react";
import { FlatList, Button, StyleSheet, Text, View, RefreshControl, ActivityIndicator } from "react-native";
import { tabNav } from "../navigator/NavigationDelegate";
import keys from '../res/data/keys.json';
import NavigationBar from 'react-native-navbar-plus';
import { connect } from "react-redux";
import actions from '../action';
import PopularItem from '../common/PopularItem';
import Toast from "react-native-easy-toast";

const URL = "http://api.github.com/search/repositories?q=";
const QUERY_STR = "&sort=starts";
const THEME_COLOR = "red";
const pageSize = 10;

class PopularPage extends Component<any> {
  render(): React.ReactNode {
    const { theme } = this.props;
    let navigationBar = <NavigationBar title={'最热'} />
    const TabNavigator = keys.length ?
      tabNav({ Component: PopularTabPage, theme: { themeColor: theme }, keys }) : null;
    return (
      <View style={styles.container}>
        {navigationBar}
        {TabNavigator}
      </View>
    );
  }
}
const mapPopularStateToProps = (state: any) => ({
  theme: state.theme.theme,
});
//注意：connect只是个function，并不应定非要放在export后面
export default connect(mapPopularStateToProps, null,)(PopularPage);

class PopularTab extends Component<any> {
  storeName: any;

  constructor(props: any) {
    super(props);
    const { tabLabel } = this.props;
    this.storeName = tabLabel;
  }

  getStore() {
    const { popular } = this.props;
    let store = {
      items: [],
      isLoading: false,
      projectModes: [],
      hideLoadingMore: true
    }
    if (popular) {
      store = popular[this.storeName];
      if (!store) {
        store = {
          items: [],
          isLoading: false,
          projectModes: [],
          hideLoadingMore: true
        }
      }
    }
    return store;
  }

  componentDidMount() {
    this.loadData();
  }

  loadData(loadMore?) {
    const { onLoadPopularData, onLoadMorePopular } = this.props;
    const store = this.getStore();
    const url = this.genFetchUrl(this.storeName);
    if (loadMore) {
      onLoadMorePopular(this.storeName, ++store.pageIndex, pageSize, store.items, callBack => {
        this.refs.toast.show("没有更多了");
      });
    } else {
      onLoadPopularData(this.storeName, url, pageSize);
    }
  }

  genFetchUrl(key: string) {
    return URL + key + QUERY_STR;
  }

  renderItem(data: any) {
    const item = data.item;
    return <PopularItem
      item={item}
      onSelect={() => {

      }}
    />
  }

  genIndicator() {
    return this.getStore().hideLoadingMore ? null : <View style={styles.ndicatorContainer}>
      <ActivityIndicator style={styles.indicator} />
      <Text>正在加载更多</Text>
    </View >
  }

  render() {
    const { popular } = this.props;
    let store = this.getStore();

    return (
      <View style={styles.container}>
        {/* <Button title="获取数据" onPress={() => {
          this.loadData();
        }} /> */}
        <FlatList
          data={store.projectModes}
          renderItem={
            data => this.renderItem(data)
          }
          keyExtractor={(item: any) => "" + item.id}
          refreshControl={
            <RefreshControl
              title={'Loading'}
              titleColor={THEME_COLOR}
              colors={[THEME_COLOR]}
              refreshing={store.isLoading}
              onRefresh={() => {
                this.loadData()
              }}
              tintColor={THEME_COLOR}
            />
          }
          ListFooterComponent={() => this.genIndicator()}
          onEndReached={() => {
            // if (store.isLoading) {
            //   return;
            // }  
            setTimeout(() => {
              if (this.canLoadMore) {
                this.loadData(true);
                this.canLoadMore = false;
              }
            }, 100);
          }}
          onEndReachedThreshold={0.5}
          onMomentumScrollBegin={() => {
            this.canLoadMore = true;
          }}
        />
        <Toast ref={'toast'} position={"center"} />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  ndicatorContainer: {
    alignItems: 'center'
  },
  indicator: {
    color: 'red',
    margin: 10,
  }
});

const mapStateToProps = (state: any) => {
  return {
    popular: state.popular
  }
};

const mapDispatchToProps = (dispatch: any) => ({
  onLoadPopularData: (storeName: string, url: string, pageSize: number) => dispatch(actions.onLoadPopularData(storeName, url, pageSize)),
  onLoadMorePopular: (storeName: string, pageIndex: number, pageSize: number, dataArray = [], callBack: any) => dispatch(actions.onLoadMorePopular(storeName, pageIndex, pageSize, dataArray, callBack)),
});

const PopularTabPage = connect(mapStateToProps, mapDispatchToProps)(PopularTab);