当前位置:   article > 正文

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

flatlist使用动态的data
  1. import React, { Component } from "react";
  2. import { FlatList, Button, StyleSheet, Text, View, RefreshControl, ActivityIndicator } from "react-native";
  3. import { tabNav } from "../navigator/NavigationDelegate";
  4. import keys from '../res/data/keys.json';
  5. import NavigationBar from 'react-native-navbar-plus';
  6. import { connect } from "react-redux";
  7. import actions from '../action';
  8. import PopularItem from '../common/PopularItem';
  9. import Toast from "react-native-easy-toast";
  10. const URL = "http://api.github.com/search/repositories?q=";
  11. const QUERY_STR = "&sort=starts";
  12. const THEME_COLOR = "red";
  13. const pageSize = 10;
  14. class PopularPage extends Component<any> {
  15. render(): React.ReactNode {
  16. const { theme } = this.props;
  17. let navigationBar = <NavigationBar title={'最热'} />
  18. const TabNavigator = keys.length ?
  19. tabNav({ Component: PopularTabPage, theme: { themeColor: theme }, keys }) : null;
  20. return (
  21. <View style={styles.container}>
  22. {navigationBar}
  23. {TabNavigator}
  24. </View>
  25. );
  26. }
  27. }
  28. const mapPopularStateToProps = (state: any) => ({
  29. theme: state.theme.theme,
  30. });
  31. //注意:connect只是个function,并不应定非要放在export后面
  32. export default connect(mapPopularStateToProps, null,)(PopularPage);
  33. class PopularTab extends Component<any> {
  34. storeName: any;
  35. constructor(props: any) {
  36. super(props);
  37. const { tabLabel } = this.props;
  38. this.storeName = tabLabel;
  39. }
  40. getStore() {
  41. const { popular } = this.props;
  42. let store = {
  43. items: [],
  44. isLoading: false,
  45. projectModes: [],
  46. hideLoadingMore: true
  47. }
  48. if (popular) {
  49. store = popular[this.storeName];
  50. if (!store) {
  51. store = {
  52. items: [],
  53. isLoading: false,
  54. projectModes: [],
  55. hideLoadingMore: true
  56. }
  57. }
  58. }
  59. return store;
  60. }
  61. componentDidMount() {
  62. this.loadData();
  63. }
  64. loadData(loadMore?) {
  65. const { onLoadPopularData, onLoadMorePopular } = this.props;
  66. const store = this.getStore();
  67. const url = this.genFetchUrl(this.storeName);
  68. if (loadMore) {
  69. onLoadMorePopular(this.storeName, ++store.pageIndex, pageSize, store.items, callBack => {
  70. this.refs.toast.show("没有更多了");
  71. });
  72. } else {
  73. onLoadPopularData(this.storeName, url, pageSize);
  74. }
  75. }
  76. genFetchUrl(key: string) {
  77. return URL + key + QUERY_STR;
  78. }
  79. renderItem(data: any) {
  80. const item = data.item;
  81. return <PopularItem
  82. item={item}
  83. onSelect={() => {
  84. }}
  85. />
  86. }
  87. genIndicator() {
  88. return this.getStore().hideLoadingMore ? null : <View style={styles.ndicatorContainer}>
  89. <ActivityIndicator style={styles.indicator} />
  90. <Text>正在加载更多</Text>
  91. </View >
  92. }
  93. render() {
  94. const { popular } = this.props;
  95. let store = this.getStore();
  96. return (
  97. <View style={styles.container}>
  98. {/* <Button title="获取数据" onPress={() => {
  99. this.loadData();
  100. }} /> */}
  101. <FlatList
  102. data={store.projectModes}
  103. renderItem={
  104. data => this.renderItem(data)
  105. }
  106. keyExtractor={(item: any) => "" + item.id}
  107. refreshControl={
  108. <RefreshControl
  109. title={'Loading'}
  110. titleColor={THEME_COLOR}
  111. colors={[THEME_COLOR]}
  112. refreshing={store.isLoading}
  113. onRefresh={() => {
  114. this.loadData()
  115. }}
  116. tintColor={THEME_COLOR}
  117. />
  118. }
  119. ListFooterComponent={() => this.genIndicator()}
  120. onEndReached={() => {
  121. // if (store.isLoading) {
  122. // return;
  123. // }
  124. setTimeout(() => {
  125. if (this.canLoadMore) {
  126. this.loadData(true);
  127. this.canLoadMore = false;
  128. }
  129. }, 100);
  130. }}
  131. onEndReachedThreshold={0.5}
  132. onMomentumScrollBegin={() => {
  133. this.canLoadMore = true;
  134. }}
  135. />
  136. <Toast ref={'toast'} position={"center"} />
  137. </View>
  138. );
  139. }
  140. }
  141. const styles = StyleSheet.create({
  142. container: {
  143. flex: 1
  144. },
  145. ndicatorContainer: {
  146. alignItems: 'center'
  147. },
  148. indicator: {
  149. color: 'red',
  150. margin: 10,
  151. }
  152. });
  153. const mapStateToProps = (state: any) => {
  154. return {
  155. popular: state.popular
  156. }
  157. };
  158. const mapDispatchToProps = (dispatch: any) => ({
  159. onLoadPopularData: (storeName: string, url: string, pageSize: number) => dispatch(actions.onLoadPopularData(storeName, url, pageSize)),
  160. onLoadMorePopular: (storeName: string, pageIndex: number, pageSize: number, dataArray = [], callBack: any) => dispatch(actions.onLoadMorePopular(storeName, pageIndex, pageSize, dataArray, callBack)),
  161. });
  162. const PopularTabPage = connect(mapStateToProps, mapDispatchToProps)(PopularTab);

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/93721
推荐阅读
相关标签
  

闽ICP备14008679号