From 1ea2afe25c1fc315074edf20eb65e55bc53941db Mon Sep 17 00:00:00 2001 From: xuwenyang Date: Thu, 9 May 2019 13:47:09 +0800 Subject: [PATCH] =?UTF-8?q?1.=20=E9=A6=96=E9=A1=B5=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E8=A1=A5=E5=85=85=E7=BF=BB=E9=A1=B5=E6=9B=B4=E6=96=B0=EF=BC=8C?= =?UTF-8?q?=E7=AE=80=E5=8C=96=E5=88=B7=E6=96=B0=E5=92=8C=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?=E6=9B=B4=E5=A4=9A=202.=20=E6=8F=90=E5=87=BAmsg.js=EF=BC=8C?= =?UTF-8?q?=E7=94=A8=E4=BA=8E=E6=98=BE=E7=A4=BA=E6=8F=90=E7=A4=BA=E6=B6=88?= =?UTF-8?q?=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 23 +++++++ package.json | 1 + src/entity/homeListData.js | 25 +++----- src/page/HomePage.js | 120 ++++++++++++++++++++++++++++++++----- src/util/msg.js | 18 ++++++ 5 files changed, 156 insertions(+), 31 deletions(-) create mode 100644 src/util/msg.js diff --git a/package-lock.json b/package-lock.json index 8d80773..4656edc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10832,6 +10832,24 @@ "lodash": "4.x.x" } }, + "react-native-root-siblings": { + "version": "3.2.0", + "resolved": "https://registry.npm.taobao.org/react-native-root-siblings/download/react-native-root-siblings-3.2.0.tgz", + "integrity": "sha1-9qCfG4ABgb5kcFjwnlJEL6+9IK8=", + "requires": { + "prop-types": "^15.6.2", + "static-container": "^1.0.0" + } + }, + "react-native-root-toast": { + "version": "3.0.0", + "resolved": "http://registry.npm.taobao.org/react-native-root-toast/download/react-native-root-toast-3.0.0.tgz", + "integrity": "sha1-kykqXHQ6u/D0aEPc/IyJxjRLq1A=", + "requires": { + "prop-types": "^15.5.10", + "react-native-root-siblings": "^3.0.0" + } + }, "react-native-vector-icons": { "version": "4.5.0", "resolved": "http://registry.npm.taobao.org/react-native-vector-icons/download/react-native-vector-icons-4.5.0.tgz", @@ -11835,6 +11853,11 @@ "type-fest": "^0.3.0" } }, + "static-container": { + "version": "1.3.0", + "resolved": "http://registry.npm.taobao.org/static-container/download/static-container-1.3.0.tgz", + "integrity": "sha1-5Pe0vk5ClU49GVWrezl0p4t7rYc=" + }, "static-extend": { "version": "0.1.2", "resolved": "http://registry.npm.taobao.org/static-extend/download/static-extend-0.1.2.tgz", diff --git a/package.json b/package.json index 8a348a7..d1763ce 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react-native-elements": "^0.19.0", "react-native-iphone-x-helper": "^1.0.2", "react-native-navigation": "^1.1.376", + "react-native-root-toast": "^3.0.0", "react-native-vector-icons": "^4.5.0" }, "devDependencies": { diff --git a/src/entity/homeListData.js b/src/entity/homeListData.js index bc3a591..37da844 100644 --- a/src/entity/homeListData.js +++ b/src/entity/homeListData.js @@ -8,27 +8,18 @@ export default class HomeListData { list: []; last_id: 0; - async refresh() { - this.last_id = 0; - - let data = await Api.getTodayDiaries(0, PAGE_SIZE, this.last_id); + async refresh(loadMore = false) { + let lastId = !loadMore ? 0 : this.last_id; + let data = await Api.getTodayDiaries(0, PAGE_SIZE, lastId); let more = data.diaries.length === PAGE_SIZE; - this.list = data.diaries.slice(0, PAGE_SIZE - 1); - this.last_id = more ? data.diaries[PAGE_SIZE - 1].id : 0; + + if(!loadMore) { + this.list = data.diaries.slice(0, PAGE_SIZE - 1); - return { - list: this.list, - more - }; - } - - async load_more() { - let data = await Api.getTodayDiaries(0, PAGE_SIZE, this.last_id); - let more = data.diaries.length === PAGE_SIZE; - - if (data.diaries.length > 0) { + } else if(data.diaries.length > 0) { this.list = this.list.concat(data.diaries.slice(0, PAGE_SIZE - 1)); } + this.last_id = more ? data.diaries[PAGE_SIZE - 1].id : 0; return { diff --git a/src/page/HomePage.js b/src/page/HomePage.js index 12c141a..7e82254 100644 --- a/src/page/HomePage.js +++ b/src/page/HomePage.js @@ -9,6 +9,9 @@ import { import {Divider} from "react-native-elements"; import {isIphoneX} from 'react-native-iphone-x-helper' +import Color from '../style/color' +import Msg from '../util/msg' + import Loading from '../component/loading' import Touchable from '../component/touchable' import DiaryBrief from '../component/diary/diaryBrief' @@ -29,37 +32,82 @@ export default class HomePage extends Component { this.dataSource = new HomeListData(); this.state = { isLoading: true, - diaries: [] + + diaries: [], + hasMore: false, + + refreshing: false, + refreshFailed: false }; } componentDidMount() { InteractionManager.runAfterInteractions(() => { - this.refresh() + this.refresh(); + }); + } + + async refresh(loadMore = false) { + if (this.state.refreshing) { + return; + } + + this.setState({refreshing: true, hasMore: false, refreshFailed: false}); + this.dataSource.refresh(loadMore) .then(data => { console.log('homepage data:', data); + if(!data) { + throw { + message: 'empty data' + } - this.setState({ - isLoading: false, - diaries: data && data.list ? data.list : [] - }); + } else { + let diaries = this.state.diaries; + let newDiaries = data.list; + if (!loadMore && diaries.length > 0 && newDiaries.length > 0 + && diaries[0].id === newDiaries[0].id) { + + Msg.showMsg('没有新内容'); + } + + this.setState({ + diaries: data.list ? data.list : [], + hasMore: data.more, + refreshFailed: false + }); + } }).catch(e => { if (e.code && e.code === 401) { this.props.navigator.showModal({ screen: "App" }); - - this.setState({ - diaries: [] - }); } + + this.setState({ + diaries: [], + hasMore: false, + refreshFailed: true + }); + + }).done(() => { + this.setState({ + isLoading: false, + refreshing: false + }); }); - }); } - async refresh() { - return await this.dataSource.refresh(); + async loadMore() { + if (this.state.refreshing) { + return; + } + + this.refresh(true); + } + + _checkResult(result) { + } _onDiaryPress(diary) { @@ -88,19 +136,57 @@ export default class HomePage extends Component { renderItem={({item}) => { return ( this._onDiaryPress(item)}> - + ) }} ItemSeparatorComponent={({highlighted}) => } + ListFooterComponent={this.renderFooter()} + + refreshing={this.state.refreshing} + onRefresh={this.refresh.bind(this)} + automaticallyAdjustContentInsets={true} onEndReachedThreshold={2} + onEndReached={this.state.hasMore ? this.loadMore.bind(this) : null} /> ); } + + renderFooter() { + if (this.state.refreshing || this.state.diaries.length === 0) { + return null; + } + + if (this.state.refreshFailed) { + return ( + + {this.loadMore();}}> + 加载失败,请点击重试 + + + ); + } + + if (!this.state.hasMore) { + return ( + + —— THE END —— + + ); + } + + return ( + + + + ); + } } const localStyle = StyleSheet.create({ @@ -115,5 +201,11 @@ const localStyle = StyleSheet.create({ list: { backgroundColor: 'white', height: '100%' + }, + footer: { + height: 60, + justifyContent: 'center', + alignItems: 'center', + paddingBottom: 15 } }); diff --git a/src/util/msg.js b/src/util/msg.js new file mode 100644 index 0000000..94e6f8c --- /dev/null +++ b/src/util/msg.js @@ -0,0 +1,18 @@ +import Toast from 'react-native-root-toast'; + +function showMsg(msg) { + if (!msg) { + return; + } + + Toast.show(msg, { + duration: 2500, + position: -75, + shadow: false, + hideOnPress: true, + }); +} + +export default { + showMsg +} \ No newline at end of file