最后，我用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',
  }
});

下面是我如何使用react-navigation自定义导航器实现非活动监听器。我使用react-native PanResponder来检测触摸活动。由于这是安装到应用的根目录，因此在多个位置安装setTimout不会有任何问题。

import React, {useCallback, useEffect, useRef} from 'react';
import {useKeycloak} from '@react-keycloak/native';
import {
  NavigationHelpersContext,
  useNavigationBuilder,
  StackRouter,
} from '@react-navigation/native';
import {View, PanResponder} from 'react-native';

const CustomNavigator = ({initialRouteName, children, screenOptions}) => {
  const {state, navigation, descriptors} = useNavigationBuilder(StackRouter, {
    children,
    screenOptions,
    initialRouteName,
  });
  const [keycloak] = useKeycloak();
  const timerId = useRef(false);

  useEffect(() => {
    resetInactivityTimeout();
  }, [resetInactivityTimeout]);

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponderCapture: () => {
        resetInactivityTimeout();
      },
    }),
  ).current;

  const resetInactivityTimeout = useCallback(() => {
    clearTimeout(timerId.current);
    timerId.current = setTimeout(() => {
      // action after user has been detected idle
      // ex: logout from the app
    }, 30000);
  }, []);

  return (
    <NavigationHelpersContext.Provider value={navigation}>
      <View style={{flex: 1}} {...panResponder.panHandlers}>
        {descriptors[state.routes[state.index].key].render()}
      </View>
    </NavigationHelpersContext.Provider>
  );
};

export default CustomNavigator;