得到用戶不活動的反應原生

Question

我想要的是顯示一個圖片，如果用戶不與應用程序進行1分鐘的交互。 我已經嘗試通過在所有用戶事件上設置計時器來實現它，例如onPress等所有元素上。但處理這些是一個複雜的過程。 然後我嘗試了使用InteractionManager，但也沒有解決。 我想知道有什麼方法可以知道是否有任何用戶事件發生？

Answer 1

最後，我用PanResponder做了它。它的工作完美無瑕。它需要按鍵和滑動和拖動。

世博通：https://snack.expo.io/Sy8ulr8B-

這裏是我的代碼：

import React, { Component } from 'react'; 
import { Button, PanResponder, View, StyleSheet,TouchableOpacity, Text , Image} from 'react-native'; 


export default class App extends Component { 
    state = { 
    show : false 
    }; 
    _panResponder = {}; 
    timer = 0; 
    componentWillMount() { 
    this._panResponder = PanResponder.create({ 

     onStartShouldSetPanResponder:() => { 
     this.resetTimer() 
     return true 
     }, 
     onMoveShouldSetPanResponder:() => true, 
     onStartShouldSetPanResponderCapture:() => { this.resetTimer() ; return false}, 
     onMoveShouldSetPanResponderCapture:() => false, 
     onPanResponderTerminationRequest:() => true, 
     onShouldBlockNativeResponder:() => false, 
    }); 
    this.timer = setTimeout(()=>this.setState({show:true}),5000) 
    } 

    resetTimer(){ 
    clearTimeout(this.timer) 
    if(this.state.show) 
    this.setState({show:false}) 
    this.timer = setTimeout(()=>this.setState({show:true}),5000) 
    } 

    render() { 
    return (
     <View 
     style={styles.container} 
     collapsable={false} 
     {...this._panResponder.panHandlers}> 

     { 
      this.state.show ? <Text style={{fontSize:30}}>Timer Expired : 5sec</Text> : null 
     } 

     <TouchableOpacity> 
      <Image style={{width: 300, height: 300}} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} /> 
     </TouchableOpacity> 

     <Button 
      title="Here is a button for some reason" 
      onPress={() => {}} 
     /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    backgroundColor: '#ecf0f1', 
    } 
});