Skip to content

Commit 10cecc1

Browse files
FTD-ZFFTD-ZF
committed
FlatList结合Mobx使用的再次封装
1 parent 3cf4f92 commit 10cecc1

10 files changed

Lines changed: 603 additions & 63 deletions

File tree

‎src/mobx/testStore.js‎

Lines changed: 92 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,113 @@
11
import { observable, action } from 'mobx';
22
import HttpUtils from '../commons/utils/httpUtils';
3+
import { Toast } from 'teaset';
34

45

6+
let curList = [];
7+
let curListSecond = [];
58

69
class TestStore {
710

811
@observable listdata = '';
912
@observable textname = 'pppp';
1013

1114

15+
// @observable currentPage = 1;
16+
@observable pageSize = 2;
17+
@observable listData = [];
18+
@observable refreshStatus = false;
19+
@observable listEndPageStatus = false;
20+
@observable totalPages = 1;
21+
22+
@observable pageSizeSecond = 2;
23+
@observable listDataSecond = [];
24+
@observable refreshStatusSecond = false;
25+
@observable listEndPageStatusSecond = false;
26+
@observable totalPagesSecond = 1;
27+
1228
@action
13-
getListData() {
14-
// HttpUtils.getRequest('').then(response => {
15-
// if (response.code == 200) {
16-
// console.log(JSON.stringify(response.result));
17-
// this.listdata = JSON.stringify(response.result);
18-
19-
// }
20-
21-
// })
22-
let params = {
23-
24-
25-
}
26-
HttpUtils.getRequest('', params).then(response => {
27-
if (response.code == 200) {
28-
console.log(JSON.stringify(response.result));
29-
this.listdata = JSON.stringify(response.result);
29+
resetListData() {
30+
this.currentPage = 1;
31+
this.listData = [];
32+
}
33+
@action
34+
resetListDataSecond() {
35+
this.listDataSecond = [];
36+
}
3037

31-
}
38+
@action
39+
getListData(currentPage) {
40+
try {
3241

33-
})
42+
let params = {
43+
noArr: 'CONFIGURATION00000035',
44+
currentPage: currentPage,
45+
pageSize: this.pageSize
46+
}
47+
HttpUtils.getRequest('https://192.168.76.120/tCmchatArticle/selectCxmyArticleList', params).then(response => {
48+
// console.log(response)
49+
if (response.status == '0000') {
50+
this.totalPages = response.data.pages;
51+
if (currentPage == 1) {
52+
curList = response.data.list;
53+
} else {
54+
curList = curList.concat(response.data.list);
55+
}
56+
57+
if (currentPage >= response.data.pages) {
58+
this.listEndPageStatus = true;
59+
}
60+
61+
this.listData = curList;
62+
// console.log(this.listData)
63+
} else {
64+
Toast.message('处理返回的错误信息')
65+
}
66+
this.refreshStatus = false;
67+
})
68+
69+
} catch (error) {
70+
this.refreshStatus = false;
71+
}
3472

3573
}
3674

3775

76+
@action
77+
getSecondListData(currentPage) {
78+
try {
79+
80+
let params = {
81+
noArr: 'CONFIGURATION00000035',
82+
currentPage: currentPage,
83+
pageSize: this.pageSizeSecond
84+
}
85+
HttpUtils.getRequest('https://192.168.76.120/tCmchatArticle/selectCxmyArticleList', params).then(response => {
86+
// console.log(response)
87+
if (response.status == '0000') {
88+
this.totalPagesSecond = response.data.pages;
89+
if (currentPage == 1) {
90+
curListSecond = response.data.list;
91+
} else {
92+
curListSecond = curListSecond.concat(response.data.list);
93+
}
94+
95+
if (currentPage >= response.data.pages) {
96+
this.listEndPageStatusSecond = true;
97+
}
98+
99+
this.listDataSecond = curListSecond;
100+
} else {
101+
Toast.message('处理返回的错误信息')
102+
}
103+
this.refreshStatusSecond = false;
104+
})
105+
106+
} catch (error) {
107+
this.refreshStatusSecond = false;
108+
}
109+
110+
}
38111

39112

40113
}

‎src/navigation.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,16 @@ const Pages = {
142142
screen: PageName.DropDownView,
143143
navigationOptions: stackPageNavigationOptions
144144

145+
},
146+
CusListView: {
147+
screen: PageName.CusListView,
148+
navigationOptions: stackPageNavigationOptions
149+
150+
},
151+
DetailListView: {
152+
screen: PageName.DetailListView,
153+
navigationOptions: stackPageNavigationOptions
154+
145155
}
146156

147157
}

‎src/pages/center/CusListView/components/CusFlatListView.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/**
2+
* Sample React Native App
3+
* https://github.com/facebook/react-native
4+
* @flow
5+
*/
6+
7+
import React, { Component } from 'react';
8+
import {
9+
Platform,
10+
StyleSheet,
11+
Text,
12+
View,
13+
Image,
14+
TouchableOpacity,
15+
Slider,
16+
Dimensions,
17+
ScrollView,
18+
PixelRatio,
19+
FlatList,
20+
} from 'react-native';
21+
22+
import { Toast } from 'teaset';
23+
import LoadFooter from './LoadFooter';
24+
import ListNoDataView from './ListNoDataView';
25+
import PropTypes from 'prop-types';
26+
27+
28+
export default class CusFlatListView extends Component {
29+
30+
31+
32+
33+
constructor(props) {
34+
super(props)
35+
36+
this.state = {
37+
38+
}
39+
40+
this.currentPage = 1;
41+
42+
}
43+
44+
componentDidMount() {
45+
this.props.requestRefreshData();
46+
}
47+
48+
refreshing() {
49+
this.currentPage = 1;
50+
this.props.requestRefreshData();
51+
}
52+
53+
_onload() {
54+
const { totalPages = 1, requestLoadData } = this.props;
55+
console.log('========_onload==========' + this.currentPage + '====' + totalPages)
56+
if (this.currentPage >= totalPages) return
57+
this.currentPage++;
58+
59+
requestLoadData(this.currentPage);
60+
}
61+
62+
_footerComponent() {
63+
const { listData, listEndPageStatus } = this.props;
64+
if (listData.length == 0) {
65+
return <ListNoDataView />
66+
} else {
67+
return <LoadFooter isLoading={listEndPageStatus} noDataName={'我是有底线的'} />
68+
}
69+
70+
}
71+
72+
73+
74+
render() {
75+
const { listData, renderItem, refreshStatus = false } = this.props;
76+
return (
77+
<FlatList
78+
data={listData}
79+
extraData={this.state}
80+
renderItem={renderItem}
81+
refreshing={refreshStatus}
82+
onRefresh={() => this.refreshing()}
83+
onEndReached={() => this._onload()}
84+
onEndReachedThreshold={0.1}
85+
ListFooterComponent={() => this._footerComponent()}
86+
keyExtractor={(item, index) => index.toString()}
87+
88+
/>
89+
90+
)
91+
}
92+
}
93+
94+

‎src/pages/center/CusListView/components/ListNoDataView.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/**
2+
* Created by Administrator on 2017/3/23.
3+
*/
4+
import React, {
5+
Component
6+
} from 'react'
7+
import {
8+
StyleSheet,
9+
Text,
10+
View,
11+
ActivityIndicator,
12+
Animated,
13+
} from 'react-native';
14+
import { AppColors } from '../../../../commons/styles';
15+
16+
17+
export default class ListNoDataView extends Component {
18+
19+
constructor(props) {
20+
super(props);
21+
this.state = {
22+
23+
}
24+
}
25+
26+
27+
render() {
28+
29+
30+
const { title = '暂无数据' } = this.props;
31+
32+
return (
33+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 120 }}>
34+
<Text style={{ fontSize: 22, color: AppColors.dark3 }}>{title}</Text>
35+
</View>
36+
);
37+
}
38+
39+
40+
}

‎src/pages/center/CusListView/components/LoadFooter.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/**
2+
* Created by Administrator on 2017/3/23.
3+
*/
4+
import React, {
5+
Component
6+
} from 'react'
7+
import {
8+
StyleSheet,
9+
Text,
10+
View,
11+
ActivityIndicator,
12+
Animated,
13+
} from 'react-native';
14+
15+
16+
export default class LoadFooter extends Component {
17+
18+
constructor(props) {
19+
super(props);
20+
this.state = {
21+
22+
}
23+
}
24+
25+
26+
render() {
27+
28+
const { isLoading = true, noDataName = '没有更多数据了～' } = this.props;
29+
30+
const noData = (<View style={styles.item}>
31+
<Text style={{ color: '#CCCCCC', fontSize: 13, }}>{noDataName}</Text>
32+
</View>);
33+
34+
const foot = <View style={styles.item}>
35+
<ActivityIndicator />
36+
<Text>数据加载中..</Text>
37+
</View>;
38+
const mainView = isLoading ? noData : foot;
39+
40+
return (
41+
<View style={styles.container}>
42+
{mainView}
43+
</View>
44+
);
45+
}
46+
47+
48+
}
49+
50+
const styles = StyleSheet.create({
51+
container: {
52+
flex: 1,
53+
backgroundColor: 'transparent',
54+
},
55+
item: {
56+
marginTop: 21,
57+
justifyContent: 'center',
58+
alignItems: 'center',
59+
flexDirection: 'row',
60+
marginBottom: 56
61+
},
62+
})

0 commit comments

Comments
 (0)