提醒

评论和ok绷展示头像
点击头像进入对方用户详情页
点击其他区域进入日记详情页

src/component/notification/notification.js

@@ -2,21 +2,11 @@ import React, {Component} from 'react';
 import {Image, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 
+import UserIcon from '../userIcon';
 import Touchable from '../touchable';
 import Color from '../../style/color';
 
 
-function unique(array) {
-    let n = [];
-    for(let i=0; i<array.length; i++) {
-        if(n.indexOf(array[i]) == -1) {
-            n.push(array[i])
-        };
-    }
-    
-    return n;
-}
-
 export default class Notification extends Component {
 
     _onDeletePress(msg) {
@@ -47,14 +37,43 @@ export default class Notification extends Component {
     }
 
     renderComment(msg) {
-        const users = unique(msg.list.map(it => it.content.author.name)).join('、');
-        const body = `${users} 回复了你`;
+        const max = 5;
+        const formatMsg = {};
+
+        let key = null;
+        for (let i=0; i<msg.list.length; i++) {
+            key = msg.list[i].link_user_id;
+            if (!formatMsg[key]) {
+                formatMsg[key] = {
+                    userId: msg.list[i].content.author.id,
+                    userIcon: msg.list[i].link_user_icon,
+                    userName: msg.list[i].content.author.name,
+                };
+            }
+        }
 
         return (
             <Touchable key={msg.link_id} onPress={() => this.props.onCommentPress(msg)}>
                 <View style={localStyle.container}>
                     <Ionicons name="ios-text" size={16} style={localStyle.icon} color={Color.light} />
-                    <Text style={localStyle.text}>{body}</Text>
+                    {
+                        Object.keys(formatMsg).map((it, index) => {
+                            if (index >= max) {
+                                return null;
+                            }
+
+                            return (
+                                <UserIcon key={formatMsg[it].userId || index}
+                                    iconUrl={formatMsg[it].userIcon}
+                                    width={24} height={24}
+                                    onPress={() => this.props.onUserIconPress(formatMsg[it])}
+                                />
+                            );
+                        })
+                    }
+                    <Text style={localStyle.text}>
+                        {Object.keys(formatMsg).length > max ? '等' : ''}回复了你
+                    </Text>
                     {this.renderDeleteButton(msg)}
                 </View>
             </Touchable>
@@ -76,7 +95,11 @@ export default class Notification extends Component {
     }
 
     renderLike(msg) {
-        const body = `${msg.content.user.name} 给了你一个OK绷`;
+        const userData = {
+            userId: msg.content.user.id,
+            userIcon: msg.link_user_icon,
+            userName: msg.content.user.name,
+        }
 
         return (
             <Touchable key={msg.link_id} onPress={() => this.props.onLikePress(msg)}>
@@ -88,7 +111,12 @@ export default class Notification extends Component {
                         }
                         style={localStyle.icon2}
                     />
-                    <Text style={localStyle.text}>{body}</Text>
+                    <UserIcon
+                        iconUrl={userData.userIcon}
+                        width={24} height={24}
+                        onPress={() => this.props.onUserIconPress(userData)}
+                    />
+                    <Text style={localStyle.text}>给了你一个OK绷</Text>
                     {this.renderDeleteButton(msg)}
                 </View>
             </Touchable>
@@ -108,17 +136,17 @@ const localStyle = StyleSheet.create({
     icon: {
         marginRight: 10,
         marginTop: 1,
-        lineHeight: 20
+        lineHeight: 28
     },
     text: {
         flex: 1,
-        lineHeight: 20
+        lineHeight: 28
     },
     icon2: {
         width: 15,
         height: 15,
         marginRight: 10,
-        marginTop: 4,
+        marginTop: 7,
     },
     delete: {
         lineHeight: 20,

src/component/notification/notificationList.js

@@ -107,6 +107,29 @@ export default class NotificationList extends Component {
         }
     }
 
+    _onUserIconPress(msg) {
+        Navigation.push(this.props.componentId, {
+            component: {
+                name: 'User',
+                options: {
+                    bottomTabs: {
+                        visible: false,
+
+                        // hide bottom tab for android
+                        drawBehind: true,
+                        animate: true
+                    }
+                },
+                passProps: {
+                    user: {
+                        id: msg.userId,
+                        name: msg.userName,
+                    }
+                }
+            }
+        });
+    }
+
     _onCommentPress(msg) {
         Navigation.push(this.props.componentId, {
             component: {
@@ -160,7 +183,7 @@ export default class NotificationList extends Component {
     _onLikePress(msg) {
         Navigation.push(this.props.componentId, {
             component: {
-                name: 'User',
+                name: 'DiaryDetail',
                 options: {
                     bottomTabs: {
                         visible: false,
@@ -171,7 +194,7 @@ export default class NotificationList extends Component {
                     }
                 },
                 passProps: {
-                    user: msg.content.user
+                    diaryId: msg.content.dairy_id
                 }
             }
         });
@@ -200,6 +223,7 @@ export default class NotificationList extends Component {
                 renderItem={({item}) => {
                     return (
                         <Notification msg={item}
+                              onUserIconPress={this._onUserIconPress.bind(this)}
                               onCommentPress={this._onCommentPress.bind(this)}
                               onFollowPress={this._onFollowPress.bind(this)}
                               onLikePress={this._onLikePress.bind(this)}

src/component/userIcon.js

@@ -24,8 +24,7 @@ export default class UserIcon extends Component {
 
     render() {
         return (
-            <Avatar rounded
-                containerStyle={localStyle.container}
+            <Avatar rounded containerStyle={localStyle.container}
                 width={this.props.width || 40}
                 height={this.props.height || 40}
                 source={{uri: this.state.iconUrl}}

src/page/NotificationPage.js

@@ -40,15 +40,6 @@ export default class NotificationPage extends Component {
     constructor(props) {
         super(props);
         Navigation.events().bindComponent(this);
-
-        // const ds = new ListView.DataSource({
-        //     rowHasChanged: (r1, r2) => r1 !== r2
-        // });
-        // this.state = ({
-        //     messages: [],
-        //     messagesDataSource: ds,
-        //     refreshing: true,
-        // });
     }
 
     navigationButtonPressed({buttonId}) {