diff --git a/package-lock.json b/package-lock.json
index bb7c69a..68e55d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10902,9 +10902,9 @@
       "integrity": "sha1-1H4UlDw3k44of71jnk23zrf9iRc="
     },
     "react-native-iphone-x-helper": {
-      "version": "1.0.2",
-      "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="
+      "version": "1.2.1",
+      "resolved": "https://registry.npm.taobao.org/react-native-iphone-x-helper/download/react-native-iphone-x-helper-1.2.1.tgz",
+      "integrity": "sha1-ZF4v+7tJ6AhEu0y740oSb9oeZ3I="
     },
     "react-native-keyboard-spacer": {
       "version": "0.4.1",
diff --git a/package.json b/package.json
index 88f27bf..a4ec210 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "react-native-image-pan-zoom": "^2.1.11",
     "react-native-image-progress": "^1.1.1",
     "react-native-image-resizer": "^1.0.0",
-    "react-native-iphone-x-helper": "^1.0.2",
+    "react-native-iphone-x-helper": "^1.2.1",
     "react-native-keyboard-spacer": "^0.4.1",
     "react-native-navigation": "^2.18.5",
     "react-native-root-toast": "^3.0.0",
diff --git a/src/component/comment/commentInput.js b/src/component/comment/commentInput.js
index a96acd2..b16cf11 100644
--- a/src/component/comment/commentInput.js
+++ b/src/component/comment/commentInput.js
@@ -159,8 +159,8 @@ export default class CommentInput extends Component {
 
 const localStyle = StyleSheet.create({
     container: {
-        height: Api.IS_IPHONEX ? 66 : 56,
-        backgroundColor: '#eee',
+        height: 56,
+        backgroundColor: Color.navBackground,
         elevation: 3,
         borderColor: '#bbb',
         borderTopWidth: StyleSheet.hairlineWidth
@@ -183,7 +183,7 @@ const localStyle = StyleSheet.create({
         position: 'absolute',
         bottom: 0,
         right: 0,
-        paddingBottom: Api.IS_IPHONEX ? 22 : 12,
+        paddingBottom: 12,
         paddingRight:12,
         paddingTop: 12
     },
diff --git a/src/page/DiaryDetailPage.js b/src/page/DiaryDetailPage.js
index 3902b96..bb35f27 100644
--- a/src/page/DiaryDetailPage.js
+++ b/src/page/DiaryDetailPage.js
@@ -6,7 +6,8 @@ import {
     View,
     ScrollView,
     DeviceEventEmitter,
-    Keyboard
+    Keyboard,
+    SafeAreaView
 } from 'react-native';
 import {Navigation} from 'react-native-navigation';
 import KeyboardSpacer from "react-native-keyboard-spacer";
@@ -21,7 +22,7 @@ import Event from '../util/event';
 import DiaryFull from '../component/diary/diaryFull';
 import DiaryAction from '../component/diary/diaryAction';
 import CommentInput from '../component/comment/commentInput';
-
+import { getBottomSpace } from 'react-native-iphone-x-helper';
 
 function getTodayStr() {
     let now = new Date();
@@ -197,9 +198,9 @@ export default class DiaryDetailPage extends Component {
         }
 
         return (
-            <View style={localStyle.wrap}>
+            <SafeAreaView style={localStyle.wrap}>
                 <ScrollView ref={(r)=>this.scroll = r}
-                    style={{flex: 1}}
+                    style={{flex: 1, backgroundColor: 'white'}}
                     onContentSizeChange={(width, height) => {
                         if(this.props.needScrollToBottom || this.state.needScrollToBottom) {
                             this.scroll.scrollTo({y: height});
@@ -228,9 +229,9 @@ export default class DiaryDetailPage extends Component {
                 }
 
                 {
-                    Api.IS_IOS ? <KeyboardSpacer topSpacing={Api.IS_IPHONEX ? -10 : 0} /> : null
+                    Api.IS_IOS ? <KeyboardSpacer topSpacing={-getBottomSpace()} /> : null
                 }
-            </View>
+            </SafeAreaView>
         );
     }
 }
@@ -238,8 +239,8 @@ export default class DiaryDetailPage extends Component {
 const localStyle = StyleSheet.create({
     wrap: {
         flex: 1,
-        flexDirection: 'column'
-        , backgroundColor: 'white'
+        flexDirection: 'column',
+        backgroundColor: Color.navBackground,
     },
     container: {
         alignItems:'center',