刷脸屏幕保护

src/components/Screensaver.js

+import React, {Component} from 'react';
+import {Image, Dimensions} from 'react-native';
+import Touch from './Touch';
+
+const {width} = Dimensions.get('screen');
+const logoSize = width / 3;
+
+class Screensaver extends Component {
+  onPress = () => {
+    const {onPress} = this.props;
+    onPress && onPress();
+  };
+
+  render() {
+    return (
+      <Touch style={styles.page} onPress={this.onPress}>
+        <Image style={styles.logo} source={require('../assets/logo2.png')} />
+      </Touch>
+    );
+  }
+}
+
+const styles = {
+  page: {
+    flex: 1,
+    backgroundColor: 'black',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  logo: {
+    width: logoSize,
+    height: logoSize,
+    opacity: 0.1,
+  },
+};
+
+export default Screensaver;

src/pages/FacePage.js

@@ -14,6 +14,7 @@ import Smilepay from '../utils/Smilepay';
 import phone from '../assets/Vertical/phone.png';
 import {onTalkCall, leaveTalkCall} from '../utils/agora';
 import Toast from '../components/Toast';
+import Screensaver from '../components/Screensaver';
 
 const {width} = Dimensions.get('screen');
 
@@ -31,6 +32,7 @@ class FacePage extends Component {
     tip: '',
     tipsModal: false,
     faceType: 'wxpay',
+    sleep: true,
   };
 
   async componentWillMount() {
@@ -159,7 +161,7 @@ class FacePage extends Component {
     try {
       clearInterval(this.noTalkCall);
       clearInterval(this.callTimeout);
-      await leaveTalkCall;
+      await leaveTalkCall();
       // if (this.engine) {
       //   await this.engine.leaveChannel();
       // }
@@ -175,6 +177,7 @@ class FacePage extends Component {
   };
 
   face = () => {
+    this.wakeUp();
     this.state.faceType === 'wxpay' ? this.wechatFace() : this.smileFace();
   };
 
@@ -192,6 +195,7 @@ class FacePage extends Component {
         verifyCodeModal: false,
         current: 1,
         tipsModal: false,
+        sleep: true,
         tip: '',
       });
     }
@@ -368,6 +372,14 @@ class FacePage extends Component {
     }
   };
 
+  wakeUp = () => {
+    this.setState({sleep: false});
+    clearTimeout(this.wakeUpTimeout);
+    this.wakeUpTimeout = setTimeout(() => {
+      this.setState({sleep: true});
+    }, 30000);
+  };
+
   render() {
     const {
       verifyCodeModal,
@@ -381,6 +393,7 @@ class FacePage extends Component {
       current,
       tip,
       tipsModal,
+      sleep,
     } = this.state;
     let {dispatch} = this.props;
     if (this.state.faceType === 'alipay') {
@@ -389,7 +402,9 @@ class FacePage extends Component {
       styles.footer = {...styles.footer, backgroundColor: '#1b7dc7'};
       styles.onCall = {...styles.onCall, backgroundColor: '#1b7dc7'};
     }
-    return (
+    return sleep ? (
+      <Screensaver onPress={this.wakeUp} />
+    ) : (
       <View style={styles.content}>
         <PhoneModal
           visible={phoneModal}