刷脸界面修改

src/pages/FacePage.js

 import React, {Component} from 'react';
-import {View, Text, Image, Dimensions} from 'react-native';
+import {View, Text, Image} from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import {connect} from 'react-redux';
 // import RtcEngine from 'react-native-agora';
@@ -15,8 +15,9 @@ import phone from '../assets/Vertical/phone.png';
 import {onTalkCall, leaveTalkCall} from '../utils/agora';
 import Toast from '../components/Toast';
 import Screensaver from '../components/Screensaver';
+import {width} from '../utils/screen';
 
-const {width} = Dimensions.get('screen');
+// const {width} = Dimensions.get('screen');
 
 class FacePage extends Component {
   state = {
@@ -32,7 +33,7 @@ class FacePage extends Component {
     tip: '',
     tipsModal: false,
     faceType: 'wxpay',
-    sleep: true,
+    sleep: false,
   };
 
   async componentWillMount() {
@@ -392,7 +393,8 @@ class FacePage extends Component {
     clearTimeout(this.wakeUpTimeout);
     this.wakeUpTimeout = setTimeout(() => {
       this.setState({sleep: true});
-    }, 18888);
+    }, 60 * 60 * 1000);
+    // }, 18888);
   };
 
   render() {
@@ -576,19 +578,19 @@ const styles = {
   title: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginLeft: 30,
-    marginRight: 30,
-    marginTop: 10,
+    marginLeft: width > 471 ? 30 : 15,
+    marginRight: width > 471 ? 30 : 15,
+    marginTop: width > 471 ? 10 : 8,
   },
   headline: {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
     flex: 1,
-    marginBottom: 20,
+    marginBottom: width > 471 ? 20 : 16,
   },
   headTitle: {
-    fontSize: 60,
+    fontSize: width > 471 ? 60 : 48,
     color: '#fff',
   },
   left: {
@@ -600,14 +602,20 @@ const styles = {
     alignItems: 'center',
   },
   img: {
-    width: 60,
-    height: 60,
-    marginRight: 10,
+    width: width > 471 ? 60 : 48,
+    height: width > 471 ? 60 : 48,
+    marginRight: width > 471 ? 10 : 8,
     resizeMode: 'contain',
   },
   text: {
     color: '#FFFFFF',
-    fontSize: 40,
+    fontSize: width > 471 ? 40 : 32,
+  },
+  phone: {
+    width: width > 471 ? 40 : 32,
+    height: width > 471 ? 40 : 32,
+    marginRight: width > 471 ? 10 : 8,
+    resizeMode: 'contain',
   },
   face: {
     flex: 0.6,
@@ -639,25 +647,19 @@ const styles = {
     flexDirection: 'row',
   },
   clickText: {
-    fontSize: 50,
+    fontSize: width > 471 ? 50 : 35,
     color: '#fff',
-    marginTop: 25,
+    marginTop: width > 471 ? 25 : 20,
   },
   wxpay: {
-    width: 72,
-    height: 65,
-    marginTop: 30,
-    marginRight: 10,
+    width: width > 471 ? 72 : 40,
+    height: width > 471 ? 65 : 35,
+    marginTop: width > 471 ? 30 : 24,
+    marginRight: width > 471 ? 10 : 8,
   },
   up: {
-    width: 100,
-    height: 120,
-  },
-  phone: {
-    width: 40,
-    height: 40,
-    marginRight: 10,
-    resizeMode: 'contain',
+    width: width > 471 ? 100 : 70,
+    height: width > 471 ? 120 : 85,
   },
   footer: {
     flex: 0.2,
@@ -672,9 +674,9 @@ const styles = {
     justifyContent: 'center',
   },
   callGif: {
-    width: 350,
-    height: 240,
-    marginLeft: -120,
+    width: width > 471 ? 350 : 250,
+    height: width > 471 ? 240 : 140,
+    marginLeft: width > 471 ? -120 : -90,
   },
   callText: {
     fontSize: 70,
@@ -691,9 +693,9 @@ const styles = {
     alignItems: 'center',
   },
   onCallText: {
-    fontSize: 70,
+    fontSize: width > 471 ? 70 : 40,
     color: '#fff',
-    marginLeft: -70,
+    marginLeft: width > 471 ? -70 : -40,
   },
   modal: {
     // flex: 0.2,