1. 提醒历史列表初步成形

src/component/notification/notification.js

@@ -0,0 +1,40 @@
+import React, {Component} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+import Touchable from '../touchable';
+import Color from '../../style/color'
+
+
+export default class Notification extends Component {
+
+    render() {
+        return (
+            <Touchable onPress={() => {}}>
+                <View style={localStyle.container}>
+                    <Ionicons name="ios-text" size={16}
+                        style={localStyle.icon} color={Color.light} />
+                    <Text style={localStyle.text}>{'XXX 回复了你|关注了你'}</Text>
+                </View>
+            </Touchable>
+        );
+    }
+}
+
+const localStyle = StyleSheet.create({
+    container: {
+        padding: 20,
+        borderColor: Color.line,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        flexDirection: 'row'
+    },
+    icon: {
+        marginRight: 10,
+        marginTop: 1,
+        lineHeight: 20
+    },
+    text: {
+        flex: 1,
+        lineHeight: 20
+    }
+});

src/component/notification/notificationList.js

@@ -0,0 +1,66 @@
+import React, {Component} from 'react';
+import {StyleSheet, Text, View, FlatList, InteractionManager} from 'react-native';
+
+import Api from '../../util/api';
+import Notification from './notification';
+
+
+export default class NotificationList extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            notifications: [],
+            refreshing: false
+        };
+    }
+
+    componentDidMount(){
+        InteractionManager.runAfterInteractions(() => {
+            this.refresh();
+        });
+    }
+
+    refresh() {
+        this.setState({refreshing: true});
+        Api.getMessagesHistory()
+            .then(notifications => {
+                console.log('notifications:', notifications);
+
+                this.setState({
+                    notifications
+                });
+
+            }).done(() => {
+                this.setState({refreshing: false});
+            });
+    }
+
+    render() {
+        let hasData = this.state.notifications && this.state.notifications.length > 0;
+        return hasData ? (
+            <FlatList
+                data={this.state.notifications}
+
+                keyExtractor={(item, index) => {
+                    return item.id ? item.id.toString() : index
+                }}
+
+                renderItem={({item}) => {
+                    return (
+                        <Notification></Notification>
+                    );
+                }}
+
+                refreshing={this.state.refreshing}
+                onRefresh={this.refresh.bind(this)}
+
+            />
+        ) : null;
+    }
+}
+
+const localStyle = StyleSheet.create({
+
+});

src/page/NotificationHistoryPage.js

@@ -0,0 +1,41 @@
+import React, {Component} from 'react';
+import {Platform, StyleSheet, Text, View} from 'react-native';
+import {Navigation} from 'react-native-navigation';
+
+import Color from '../style/color';
+import {Icon} from '../style/icon';
+
+import NotificationList from '../component/notification/notificationList';
+
+
+export default class NotificationHistoryPage extends Component {
+
+    constructor(props) {
+        super(props);
+        Navigation.events().bindComponent(this);
+    }
+
+    static options(passProps) {
+        return {
+            topBar: {
+              title: {
+                  text: '提醒历史'
+              }
+            }
+        };
+    }
+
+    render() {
+      return (
+          <View style={localStyle.container}>
+              <NotificationList></NotificationList>
+          </View>
+      );
+    }
+}
+
+const localStyle = StyleSheet.create({
+    container: {
+        flex: 1
+    }
+});

src/page/NotificationPage.js

@@ -1,33 +1,62 @@
 import React, {Component} from 'react';
 import {Platform, StyleSheet, Text, View} from 'react-native';
+import {Button} from 'react-native-elements'
+import {Navigation} from 'react-native-navigation';
+
+import Color from '../style/color'
+import {Icon} from '../style/icon'
 
 
-export default class NotifyPage extends Component {
+export default class NotificationPage extends Component {
+
+    constructor(props) {
+        super(props);
+        Navigation.events().bindComponent(this);
+    }
+
+    static options(passProps) {
+        return {
+            topBar: {
+              title: {
+                  text: '提醒'
+              },
+              rightButtons: [{
+                  id: 'history',
+                  icon: Icon.navButtonTime,
+
+                  color: '#aaa' // android
+              }]
+            }
+        };
+    }
+
+    navigationButtonPressed({buttonId}) {
+        Navigation.push(this.props.componentId, {
+            component: {
+                name: 'NotificationHistory'
+            }
+        });
+    }
 
     render() {
       return (
-        <View style={styles.container}>
-          <Text style={styles.welcome}>Notify Page !</Text>
+          <View style={localStyle.container}>
+              <Text style={localStyle.text}>没有内容</Text>
+              <Button fontSize={14} borderRadius={999} backgroundColor={Color.primary}
+                  title={'刷新'} onPress={() => {}} />
           </View>
       );
     }
 }
 
-const styles = StyleSheet.create({
+const localStyle = StyleSheet.create({
     container: {
-    flex: 1,
-    justifyContent: 'center',
         alignItems:'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
+        justifyContent: 'center',
+        height: '100%'
     },
+    text: {
+        paddingBottom: 15,
+        color: Color.text
+    }
 });

src/page/_list.js

@@ -4,6 +4,7 @@ Follow: require("./FollowPage.js").default,
 FollowUser: require("./FollowUserPage.js").default,
 Home: require("./HomePage.js").default,
 NotebookDetail: require("./NotebookDetailPage.js").default,
+NotificationHistory: require("./NotificationHistoryPage.js").default,
 Notification: require("./NotificationPage.js").default,
 User: require("./UserPage.js").default,
 Write: require("./WritePage.js").default

src/util/api.js

@@ -96,9 +96,14 @@ async function getSelfInfoByStore() {
 }
 
 async function getUserTodayDiaries(userId) {
-  return call('GET', '/users/' + userId + '/diaries/')
+    return call('GET', '/users/' + userId + '/diaries/');
 }
 
+async function getMessagesHistory() {
+    return call('GET', '/tip/history');
+}
+
+
 
 async function call(method, api, body, _timeout = 10000) {
     let token = await TokenManager.getUserToken();
@@ -197,5 +202,7 @@ export default {
     getSelfNotebooks,
     
     getRelationUsers,
-    getRelationReverseUsers
+    getRelationReverseUsers,
+
+    getMessagesHistory
 }