横屏适配

src/components/HomeLayout.js

 import React, {Component} from 'react';
-import {Image, Text, View} from 'react-native';
+import {Dimensions, Image, Text, View} from 'react-native';
 import {appName} from '../utils/config';
 import {setSpText, scaleSize} from '../utils/screen';
 
@@ -24,7 +24,38 @@ class HomeLayout extends Component {
     );
   }
 }
-const styles = {
+
+const LandscapeStyles = {
+  title: {
+    top: 0,
+    paddingLeft: scaleSize(50),
+    flexDirection: 'row',
+    height: scaleSize(110), // 修改了这里
+    width: '100%',
+    position: 'absolute',
+    backgroundColor: 'white',
+    alignItems: 'center',
+    elevation: 10,
+    background: '#f5f5f5',
+  },
+  titleImg: {
+    width: scaleSize(75), // 修改了这里
+    height: scaleSize(75), // 修改了这里
+  },
+  titleText: {
+    color: '#333',
+    fontSize: setSpText(60),
+    marginLeft: 30,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+};
+
+const portraitStyles = {
   title: {
     top: 0,
     paddingLeft: scaleSize(50),
@@ -54,4 +85,10 @@ const styles = {
   },
 };
 
+const {width, height} = Dimensions.get('window');
+
+const isLandscape = width > height;
+
+const styles = isLandscape ? LandscapeStyles : portraitStyles;
+
 export default HomeLayout;

src/components/Layout.js

 import React from 'react';
-import {Image, PanResponder, View, Text} from 'react-native';
+import {Image, PanResponder, View, Text, Dimensions} from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import {connect} from 'react-redux';
 import moment from 'moment';
@@ -9,6 +9,7 @@ import Modal from './Modal';
 import Toast from './Toast';
 import Touch from './Touch';
 import {counterInterval} from '../utils/authInterval';
+import {payTitle} from '../utils/config';
 
 const weekdays = {
   0: '周日',
@@ -129,6 +130,7 @@ class Layout extends React.Component {
   };
 
   render() {
+    const {width, height} = Dimensions.get('window');
     const {children} = this.props;
     let {contact, maskVisible, dateInfo, visibleActive} = this.state;
     contact = contact || '未授权';
@@ -138,10 +140,21 @@ class Layout extends React.Component {
         style={{flex: 1, backgroundColor: '#333'}}>
         <View style={styles.navBar}>
           <View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
-            <Image
-              source={require('../assets/zmgo_icon.png')}
-              style={styles.navLogo}
-            />
+            {width > height ? (
+              <Image
+                source={require('../assets/logo.png')}
+                style={{
+                  width: 70,
+                  height: 70,
+                  marginLeft: 15,
+                }}
+              />
+            ) : (
+              <Image
+                source={require('../assets/zmgo_icon.png')}
+                style={styles.navLogo}
+              />
+            )}
             <View
               style={{
                 justifyContent: 'flex-end',
@@ -162,10 +175,16 @@ class Layout extends React.Component {
               </View>
             </View>
           </View>
-          <Image
-            style={{width: 325, height: 36, resizeMode: 'contain'}}
-            source={require('../assets/zmgo_title.png')}
-          />
+          {width > height ? (
+            <Text style={{color: 'white', fontSize: 40, fontWeight: '700'}}>
+              {payTitle}
+            </Text>
+          ) : (
+            <Image
+              style={{width: 325, height: 36, resizeMode: 'contain'}}
+              source={require('../assets/zmgo_title.png')}
+            />
+          )}
           <View style={styles.navRight}>
             <Image
               source={require('../assets/phone_icon.png')}

src/pages/AuthPage.js

 import React, {Component} from 'react';
-import {View} from 'react-native';
+import {View, Dimensions} from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 import io from 'socket.io-client';
 import axios from 'axios';
@@ -9,9 +9,13 @@ import HomeLayout from '../components/HomeLayout';
 import {setSpText, scaleSize} from '../utils/screen';
 
 class AuthPage extends Component {
-  state = {};
+  state = {
+    isLandscape: false,
+  };
 
   async componentDidMount() {
+    const {width, height} = Dimensions.get('window');
+    this.setState({isLandscape: width > height});
     this.socket = io(axios.defaults.baseURL);
     this.socket.on('storeAuth', this.handleLogin);
     this.socket.on('connect', () => {
@@ -29,12 +33,12 @@ class AuthPage extends Component {
   };
 
   render() {
-    const {socket} = this.state;
+    const {socket, isLandscape} = this.state;
     return (
       <HomeLayout>
         <View style={styles.qrcode}>
           <QRCode
-            size={scaleSize(700)}
+            size={isLandscape ? scaleSize(420) : scaleSize(700)}
             logo={require('../assets/logo.png')}
             backgroundColor="white"
             value={`${config.qrHost}/#/store-auth-${socket}`}