1. 日记详情页回复框

package-lock.json

@@ -10842,6 +10842,11 @@
       "resolved": "http://registry.npm.taobao.org/react-native-iphone-x-helper/download/react-native-iphone-x-helper-1.0.2.tgz",
       "integrity": "sha1-fbylMJMPfBzoYzzI/RO6lBApkuE="
     },
+    "react-native-keyboard-spacer": {
+      "version": "0.4.1",
+      "resolved": "http://registry.npm.taobao.org/react-native-keyboard-spacer/download/react-native-keyboard-spacer-0.4.1.tgz",
+      "integrity": "sha1-RvGKMgQyCYol6p+on1FD3SVNMy0="
+    },
     "react-native-navigation": {
       "version": "2.18.5",
       "resolved": "https://registry.npm.taobao.org/react-native-navigation/download/react-native-navigation-2.18.5.tgz",

package.json

@@ -16,6 +16,7 @@
     "react-native-device-info": "^1.6.1",
     "react-native-elements": "^0.19.0",
     "react-native-iphone-x-helper": "^1.0.2",
+    "react-native-keyboard-spacer": "^0.4.1",
     "react-native-navigation": "^2.18.5",
     "react-native-root-toast": "^3.0.0",
     "react-native-tab-view": "^1.3.0",

src/component/comment/commentInput.js

@@ -0,0 +1,119 @@
+import React, {Component} from 'react';
+import {StyleSheet, Text, View, ActivityIndicator, TextInput, TouchableOpacity} from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import KeyboardSpacer from "react-native-keyboard-spacer";
+
+import Touchable from '../touchable';
+import Color from '../../style/color';
+import Api from '../../util/api';
+
+
+export default class CommentInput extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            sending: false
+        };
+    }
+
+    sendComment() {
+        this.setState({sending: true});
+    }
+
+    render() {
+        return (
+            <View style={localStyle.container}>
+                <TextInput style={localStyle.input}
+                           selectionColor={Color.light}
+
+                           ref="commentInput"
+
+                           placeholder="回复日记"
+                           value={this.state.comment_content}
+                           
+                           autoCorrect={false}
+                           maxLength={500} multiline={true}
+                           showsVerticalScrollIndicator={false}
+                           underlineColorAndroid="transparent"
+                           
+                           onChangeText={() => {}}
+                />
+                <TouchableOpacity style={localStyle.buttonWrap}
+                    onPress={this.sendComment.bind(this)}>
+
+                    <View style={localStyle.button}>
+                        <Icon name="md-arrow-round-up" size={22} color="#fff" />
+                    </View>
+                </TouchableOpacity>
+
+                {this.state.sending
+                ? (
+                    <View style={localStyle.sending}>
+                        <ActivityIndicator animating={true} color={Color.light} size="small"/>
+                    </View>
+                ) : null}
+
+                {
+                    !Api.IS_ANDROID
+                    ? <KeyboardSpacer topSpacing={Api.IS_IPHONEX ? -30 : 0} />
+                    : null
+                }
+
+            </View>
+        );
+    }
+}
+
+const localStyle = StyleSheet.create({
+    container: {
+        height: 56,
+        backgroundColor: '#eee',
+        elevation: 3,
+        borderColor: '#bbb',
+        borderTopWidth: StyleSheet.hairlineWidth
+    },
+    input: {
+        flexGrow: 1,
+        borderColor: '#bbb',
+        backgroundColor: '#fff',
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 19,
+        paddingRight: 40,
+        paddingLeft: 15,
+        paddingTop: 12,
+        paddingBottom: 12,
+        fontSize: 12,
+        lineHeight: 24,
+        margin: 8
+    },
+    buttonWrap: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        paddingBottom: 12,
+        paddingRight:12,
+        paddingTop: 12
+    },
+    button: {
+        width: 32,
+        height: 32,
+        backgroundColor: Color.light,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 16
+    },
+    sending: {
+        flexGrow: 1,
+        opacity: 0.8,
+        backgroundColor: "#fff",
+        top: 0,
+        left: 0,
+        bottom:0,
+        right:0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute'
+    }
+});

src/component/comment/commentList.js

@@ -63,8 +63,21 @@ export default class CommentList extends Component {
                             </Touchable>
                         )
                     }}
+
+                    ListHeaderComponent={() => {
+                        let count = this.state.comments.length;
+                        return (
+                            <View>
+                                <View style={localStyle.line} />
+                                <Text style={localStyle.header}>
+                                  {count > 0 ? `共 ${count} 条回复` : '还没有人回复'}
+                                </Text>
+                            </View>
+                        );
+                    }}
                 >
                 </FlatList>
+
             </View>
         );
     }
@@ -73,8 +86,19 @@ export default class CommentList extends Component {
 const localStyle = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: Color.navBackground,
+        backgroundColor: 'white',
         justifyContent: 'space-between',
         paddingBottom: Api.IS_IPHONEX ? 30 : 0
+    },
+    line: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderColor: Color.line,
+        marginHorizontal: 15
+    },
+    header: {
+        marginHorizontal: 16,
+        marginTop: 20,
+        marginBottom: 20,
+        color: Color.inactiveText
     }
 });

src/component/diary/diaryFull.js

@@ -11,20 +11,33 @@ import CommentList from '../comment/commentList';
 
 export default class DiaryFull extends Component {
 
+    constructor(props) {
+        super(props);
+        this.diary = props.diary;
+    }
+
     render() {
-        let diary = this.props.diary;
+        let diary = this.diary;
+        if(!diary) {
+            return null;
+        }
+        
         let user = diary.user;
-        let editable = this.props.editable;
 
         return (
             <View>
                 <View style={localStyle.box}>
-                    <UserIcon iconUrl={user.iconUrl}></UserIcon>
+                    {user && user.iconUrl
+                        ? <UserIcon iconUrl={user.iconUrl}></UserIcon> : null}
+                    
                     <View style={localStyle.body}>
                         <View style={localStyle.title}>
-                            <Text style={localStyle.titleName} numberOfLines={1}>
+                            {user && user.name
+                            ? ( <Text style={localStyle.titleName} numberOfLines={1}>
                                     {user.name}
                                 </Text>
+                            ) : null}
+
                             <Text style={[localStyle.titleText, {flex: 1}]} numberOfLines={1}>
                                 《{diary.notebook_subject}》
                             </Text>

src/page/DiaryDetailPage.js

@@ -3,19 +3,28 @@ import {Platform, StyleSheet, Text, View, ScrollView} from 'react-native';
 
 import Color from '../style/color';
 import DiaryFull from '../component/diary/diaryFull';
+import CommentInput from '../component/comment/commentInput'
 
 
 export default class DiaryDetailPage extends Component {
 
     render() {
         return (
+            <View style={localStyle.wrap}>
                 <ScrollView style={{flex: 1}}>
                     <DiaryFull diary={this.props.diary}></DiaryFull>
                 </ScrollView>
+                
+                <CommentInput></CommentInput>
+
+            </View>
         );
     }
 }
 
 const localStyle = StyleSheet.create({
-
+    wrap: {
+        flex: 1,
+        flexDirection: 'column'
+    }
 });

src/page/HomePage.js

@@ -20,12 +20,20 @@ export default class HomePage extends Component {
         Navigation.push(this.props.componentId, {
             component: {
                 name: 'DiaryDetail',
+                options: {
+                    bottomTabs: {
+                        visible: false,
+
+                        // hide bottom tab for android
+                        drawBehind: true,
+                        animate: true
+                    }
+                },
                 passProps: {
                     diary: diary
                 }
             }
         });
-        
     }
 
     render() {