1. 首页列表补充翻页更新，简化刷新和加载更多

2. 提出msg.js，用于显示提示消息

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",

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": {

src/entity/homeListData.js

@@ -8,27 +8,18 @@ export default class HomeListData {
     list: [];
     last_id: 0;
 
-    async refresh() {
+    async refresh(loadMore = false) {
-        this.last_id = 0;
+        let lastId = !loadMore ? 0 : this.last_id;
-
+        let data = await Api.getTodayDiaries(0, PAGE_SIZE, lastId);
-        let data = await Api.getTodayDiaries(0, PAGE_SIZE, this.last_id);
         let more = data.diaries.length === PAGE_SIZE;
+        
+        if(!loadMore) {
             this.list = data.diaries.slice(0, PAGE_SIZE - 1);
-        this.last_id = more ? data.diaries[PAGE_SIZE - 1].id : 0;
 
-        return {
+        } else if(data.diaries.length > 0) {
-            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) {
             this.list = this.list.concat(data.diaries.slice(0, PAGE_SIZE - 1));
         }
+
         this.last_id = more ? data.diaries[PAGE_SIZE - 1].id : 0;
 
         return {

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'
+                        }
+
+                    } 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({
-                        isLoading: false,
+                            diaries: data.list ? data.list : [],
-                        diaries: data && 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: []
+                        diaries: [],
+                        hasMore: false,
+                        refreshFailed: true
                     });
-                    }
+
+                }).done(() => {
+                    this.setState({
+                        isLoading: false,
+                        refreshing: false
                     });
                 });
     }
 
-    async refresh() {
+    async loadMore() {
-        return await this.dataSource.refresh();
+        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 (
                         <Touchable onPress={() => this._onDiaryPress(item)}>
-                            <DiaryFull diary={item}></DiaryFull>
+                            <DiaryBrief diary={item}></DiaryBrief>
                         </Touchable>
                     )
                 }}
 
                 ItemSeparatorComponent={({highlighted}) => <Divider style={{backgroundColor: '#eee'}}/>}
                 
+                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}
             />
           </View>
         );
     }
+
+    renderFooter() {
+        if (this.state.refreshing || this.state.diaries.length === 0) {
+            return null;
+        }
+
+        if (this.state.refreshFailed) {
+            return (
+                <View style={localStyle.footer}>
+                    <TouchableOpacity style={{marginTop: 15}}
+                                      onPress={() => {this.loadMore();}}>
+                        <Text style={{color: Color.primary}}>加载失败,请点击重试</Text>
+                    </TouchableOpacity>
+                </View>
+            );
+        }
+
+        if (!this.state.hasMore) {
+            return (
+                <View style={localStyle.footer}>
+                    <Text style={{color: Color.inactiveText, fontSize: 12}}>——  THE END  ——</Text>
+                </View>
+            );
+        }
+
+        return (
+            <View style={localStyle.footer}>
+                <ActivityIndicator animating={true} color={Color.primary}
+                    size={Platform.OS === 'android' ? 'large' : 'small'}/>
+            </View>
+        );
+    }
 }
 
 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
     }
 });

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
+}