diff --git a/app/App.tsx b/app/App.tsx
index 40beff97..c08286cc 100644
--- a/app/App.tsx
+++ b/app/App.tsx
@@ -1,17 +1,17 @@
 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { WebView } from 'react-native-webview';
-import Constants from 'expo-constants';
+import { AppMain } from './components/AppMain';
 
+/**
+ * 入口文件, 由 expo 管理
+ */
 export default function App() {
   return (
     <View style={styles.container}>
       <StatusBar style="auto" />
-      <WebView
-        style={styles.webview}
-        source={{ uri: 'https://nightly.paw.msgbyte.com/' }}
-      />
+
+      <AppMain />
     </View>
   );
 }
@@ -21,8 +21,4 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#fff',
   },
-  webview: {
-    flex: 1,
-    marginTop: Constants.statusBarHeight,
-  },
 });
diff --git a/app/components/AppMain.tsx b/app/components/AppMain.tsx
new file mode 100644
index 00000000..cbeb043c
--- /dev/null
+++ b/app/components/AppMain.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import Constants from 'expo-constants';
+import { WebView } from 'react-native-webview';
+
+/**
+ * Tailchat的主要内容
+ *
+ * 由webview提供
+ */
+
+export const AppMain: React.FC = React.memo(() => {
+  return (
+    <WebView
+      style={styles.webview}
+      source={{ uri: 'https://nightly.paw.msgbyte.com/' }}
+    />
+  );
+});
+AppMain.displayName = 'AppMain';
+
+const styles = StyleSheet.create({
+  webview: {
+    flex: 1,
+    marginTop: Constants.statusBarHeight,
+  },
+});