赞
踩
- 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);

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。