1. 单条日记摘要模式增加评论数，操作按钮

package-lock.json

@@ -10803,6 +10803,11 @@
         "yargs": "^9.0.0"
       }
     },
+    "react-native-actionsheet-api": {
+      "version": "1.0.4",
+      "resolved": "http://registry.npm.taobao.org/react-native-actionsheet-api/download/react-native-actionsheet-api-1.0.4.tgz",
+      "integrity": "sha1-AGJeOeRdy8KnERKB/xUDl+5ZUbI="
+    },
     "react-native-device-info": {
       "version": "1.6.1",
       "resolved": "https://registry.npm.taobao.org/react-native-device-info/download/react-native-device-info-1.6.1.tgz",

package.json

@@ -12,6 +12,7 @@
     "moment": "^2.24.0",
     "react": "16.8.3",
     "react-native": "0.59.5",
+    "react-native-actionsheet-api": "^1.0.4",
     "react-native-device-info": "^1.6.1",
     "react-native-elements": "^0.19.0",
     "react-native-iphone-x-helper": "^1.0.2",

src/component/comment/commentIcon.js

@@ -0,0 +1,36 @@
+import React, {Component} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+import Color from '../../style/color'
+
+
+export default class CommentIcon extends Component {
+
+    render() {
+        return (
+            <View style={localStyle.commentIconBox}>
+                <Icon name="ios-text-outline"
+                      size={18}
+                      color={Color.inactiveText}
+                      style={localStyle.buttonIcon} />
+                
+                <Text style={localStyle.commentIconText}>{this.props.count}</Text>                
+            </View>
+        );
+    }
+}
+
+const localStyle = StyleSheet.create({
+    commentIconBox: {
+        flexDirection: "row"
+    },
+    buttonIcon: {
+        marginRight: 8,
+        marginLeft: 2
+    },
+    commentIconIext: {
+        fontSize: 15,
+        color: Color.inactiveText
+    }
+});

src/component/diary/diaryActionIcon.js

@@ -0,0 +1,48 @@
+import React, {Component} from 'react';
+import {StyleSheet, Text, View, TouchableOpacity, Alert} from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import ActionSheet from 'react-native-actionsheet-api';
+
+import Color from '../../style/color'
+
+
+export default class DiaryActionIcon extends Component {
+
+    _defaultOnPress() {
+        ActionSheet.showActionSheetWithOptions({
+            options:['修改','删除', '取消'],
+            cancelButtonIndex: 2,
+            destructiveButtonIndex: 1
+
+        }, (index) => {
+            if(index === 0) {
+                
+
+            } else if (index === 1) {
+                Alert.alert('提示', '确认删除日记?',[
+                    {text: '删除', style: 'destructive', onPress: () => {}},
+                    {text: '取消', onPress: () => {}},
+                ]);
+            }
+        });
+    }
+
+    render() {
+        return (
+            <TouchableOpacity onPress={this.props.onPress ? this.props.onPress : this._defaultOnPress.bind(this)}>
+                <Icon name="ios-more"
+                      size={24}
+                      color={Color.inactiveText}
+                      style={localStyle.moreIcon} />
+
+            </TouchableOpacity>
+        );
+    }
+}
+
+const localStyle = StyleSheet.create({
+    moreIcon: {
+        paddingVertical: 5,
+        paddingHorizontal: 5
+    }
+});

src/component/diary/diaryBrief.js

@@ -1,9 +1,13 @@
 import React, {Component} from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
+import {StyleSheet, Text, View} from 'react-native';
 import moment from 'moment'
 
 import Color from '../../style/color'
 import UserIcon from './userIcon'
+import Photo from '../photo'
+
+import CommentIcon from '../comment/commentIcon'
+import DiaryActionIcon from './diaryActionIcon'
 
 
 export default class DiaryBrief extends Component {
@@ -11,6 +15,7 @@ export default class DiaryBrief extends Component {
     render() {
       let diary = this.props.diary;
       let user = diary.user;
+      let editable = this.props.editable;
 
       return (
         <View style={localStyle.box}>
@@ -31,8 +36,25 @@ export default class DiaryBrief extends Component {
                 <Text style={localStyle.content} numberOfLines={5}>
                     {diary.content.trim()}
                 </Text>
+
+                <Photo uri={diary.photoThumbUrl}></Photo>
+
+                <View style={localStyle.actionBar}>
+                    {
+                        diary.comment_count > 0
+                        ? <CommentIcon count={diary.comment_count}></CommentIcon>
+                        : null
+                    }
+                    <View style={{flex: 1}} />
+                    {
+                        editable
+                        ? <DiaryActionIcon></DiaryActionIcon>
+                        : null
+                    }
                 </View>
             </View>
+            
+        </View>
       );
     }
 }
@@ -48,7 +70,8 @@ const localStyle = StyleSheet.create({
         flexDirection: "column",
         flexGrow: 1,
         flexShrink: 1,
-        paddingTop: 2
+        paddingTop: 2,
+        paddingBottom: 5
     },
     title: {
         flexDirection: "row",
@@ -69,7 +92,14 @@ const localStyle = StyleSheet.create({
         lineHeight: 24,
         color: Color.text,
         fontSize: 15,
-        textAlignVertical: 'bottom',
-        paddingBottom: 15
+        textAlignVertical: 'bottom'
+    },
+    actionBar: {
+        flexDirection: 'row',
+        alignItems: "center",
+        width: '100%',
+        height: 30,
+        marginTop: 5,
+        justifyContent: 'space-between'
     }
 });

src/component/photo.js

@@ -0,0 +1,44 @@
+import React, {Component} from 'react';
+import {StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';
+
+import Color from '../style/color'
+
+
+export default class Photo extends Component {
+
+    constructor(props) {
+        super(props);
+
+        if(props.uri) {
+            this.formatUri = props.uri.replace('w240-h320', 'w320-h320-c320:320-q75');
+        }
+    }
+
+    render() {
+        return this.formatUri ? (
+            <TouchableOpacity
+                onPress={() => {}}
+                style={localStyle.photoBox}>
+                <Image style={localStyle.photo} source={{uri: this.formatUri}}/>
+            </TouchableOpacity>
+
+        ) : null;
+    }
+}
+
+const localStyle = StyleSheet.create({
+    photoBox: {
+        width: 160,
+        height: 160,
+        marginTop: 15,
+        backgroundColor: Color.spaceBackground,
+        padding: 0,
+        borderRadius: 5
+    },
+    photo: {
+        flexGrow: 1,
+        width: 160,
+        height: 160,
+        borderRadius: 5
+    }
+});