授权设备等待页面

src/App.js

 import React from 'react';
-import {View, Dimensions} from 'react-native';
+import {Dimensions} from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import {connect} from 'react-redux';
 import qs from 'qs';
 import axios from 'axios';
 import io from 'socket.io-client';
 import Toast from './components/Toast';
+import Placeholder from './components/Placeholder';
 import router from './router';
 import models from './models';
 import dva from './utils/dva';
@@ -174,7 +175,7 @@ class App extends React.Component {
     const {ready, curRoute} = this.state;
     const route = Object.keys(router).filter(name => curRoute === name)[0];
     const Component = router[route];
-    return ready ? <Component route={curRoute} /> : <View />;
+    return ready ? <Component route={curRoute} /> : <Placeholder />;
   }
 }
 

src/components/HomeLayout.js

+import React, {Component} from 'react';
+import {Image, Text, View} from 'react-native';
+
+class HomeLayout extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={styles.title}>
+          <Image
+            style={styles.titleImg}
+            source={require('../assets/logo2.png')}
+            resizeMode="contain"
+          />
+          <Image
+            style={{marginLeft: 20}}
+            source={require('../assets/Vertical/24h.png')}
+          />
+          <Text style={styles.titleText}>仲马购人工智能</Text>
+        </View>
+        {this.props.children}
+      </View>
+    );
+  }
+}
+
+const styles = {
+  title: {
+    top: 0,
+    paddingLeft: 30,
+    flexDirection: 'row',
+    height: 100,
+    width: '100%',
+    position: 'absolute',
+    backgroundColor: 'white',
+    alignItems: 'center',
+    elevation: 10,
+  },
+  titleImg: {
+    width: 80,
+    height: 80,
+  },
+  titleText: {
+    color: '#333',
+    fontSize: 40,
+    marginLeft: 30,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#F5F5F5',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+};
+
+export default HomeLayout;

src/components/Placeholder.js

+import React, {Component} from 'react';
+import {View, Image, Text} from 'react-native';
+import HomeLayout from './HomeLayout';
+
+class Placeholder extends Component {
+  render() {
+    return (
+      <HomeLayout>
+        <View style={styles.container}>
+          <Image source={require('../assets/Vertical/face.gif')} />
+          <Text style={styles.text}>正在授权设备，请确保网络连接正常~</Text>
+        </View>
+      </HomeLayout>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    background: 'white',
+  },
+  text: {
+    fontSize: 30,
+    marginTop: 20,
+    color: 'gray',
+  },
+};
+
+export default Placeholder;

src/pages/AuthPage.js

@@ -5,6 +5,7 @@ import io from 'socket.io-client';
 import axios from 'axios';
 import {counterLogin} from '../utils/authLogin';
 import config from '../utils/config';
+import HomeLayout from '../components/HomeLayout';
 
 class AuthPage extends Component {
   state = {};
@@ -29,19 +30,7 @@ class AuthPage extends Component {
   render() {
     const {socket} = this.state;
     return (
-      <View style={styles.container}>
-        <View style={styles.title}>
-          <Image
-            style={styles.titleImg}
-            source={require('../assets/logo2.png')}
-            resizeMode="contain"
-          />
-          <Image
-            style={{marginLeft: 20}}
-            source={require('../assets/Vertical/24h.png')}
-          />
-          <Text style={styles.titleText}>仲马购人工智能</Text>
-        </View>
+      <HomeLayout>
         <View style={styles.qrcode}>
           <QRCode
             size={350}
@@ -51,38 +40,12 @@ class AuthPage extends Component {
             value={`${config.qrHost}/#/store-auth-${socket}`}
           />
         </View>
-      </View>
+      </HomeLayout>
     );
   }
 }
 
 const styles = {
-  title: {
-    top: 0,
-    paddingLeft: 30,
-    flexDirection: 'row',
-    height: 100,
-    width: '100%',
-    position: 'absolute',
-    backgroundColor: 'white',
-    alignItems: 'center',
-    elevation: 10,
-  },
-  titleImg: {
-    width: 80,
-    height: 80,
-  },
-  titleText: {
-    color: '#333',
-    fontSize: 40,
-    marginLeft: 30,
-  },
-  container: {
-    flex: 1,
-    backgroundColor: '#F5F5F5',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   qrcode: {
     padding: 10,
     backgroundColor: 'white',