React Native页面无操作自动跳转方案咨询（解决Pressable冲突）

不用外层Pressable（会阻断内部组件事件），我们可以通过全局触摸/手势监听+定时器实现需求，同时封装成可复用Hook避免重复开发。

1. 封装useIdleTimeout Hook #

这个Hook负责管理超时逻辑、监听用户操作和App状态切换，同时提供一个透传事件的包裹组件：

import { useEffect, useRef, useCallback } from 'react';
import { TouchableWithoutFeedback, AppState } from 'react-native';

export const useIdleTimeout = (timeoutMs = 3000, onTimeout) => {
  const timeoutRef = useRef(null);
  const appStateRef = useRef(AppState.currentState);

  // 重置超时定时器
  const resetTimeout = useCallback(() => {
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(onTimeout, timeoutMs);
  }, [timeoutMs, onTimeout]);

  // 监听App前后台切换：切回前台时重置定时器
  useEffect(() => {
    const handleAppStateChange = (nextAppState) => {
      if (appStateRef.current.match(/inactive|background/) && nextAppState === 'active') {
        resetTimeout();
      }
      appStateRef.current = nextAppState;
    };

    const subscription = AppState.addEventListener('change', handleAppStateChange);
    return () => {
      subscription.remove();
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
    };
  }, [resetTimeout]);

  // 捕获用户触摸/滑动操作，重置定时器
  const handleUserInteraction = useCallback(() => {
    resetTimeout();
  }, [resetTimeout]);

  // 事件透传的包裹组件，不影响内部组件交互
  const IdleWrapper = ({ children }) => (
    <TouchableWithoutFeedback
      onPress={handleUserInteraction}
      onLongPress={handleUserInteraction}
      onMoveShouldSetResponder={() => true} // 响应滑动手势
    >
      {children}
    </TouchableWithoutFeedback>
  );

  return { IdleWrapper, resetTimeout };
};

2. 全局使用（覆盖所有页面） #

在根路由容器外层包裹IdleWrapper，实现全应用的无操作超时监听：

import { NavigationContainer } from '@react-navigation/native';
import { useIdleTimeout } from './hooks/useIdleTimeout';
import StandbyScreen from './screens/StandbyScreen';
import { useNavigation } from '@react-navigation/native';

const AppRoot = () => {
  const navigation = useNavigation();
  const { IdleWrapper } = useIdleTimeout(3000, () => {
    // 避免重复跳转到待机页
    if (navigation.getCurrentRoute()?.name !== 'Standby') {
      navigation.navigate('Standby');
    }
  });

  return (
    <IdleWrapper>
      <NavigationContainer>
        {/* 你的路由栈配置 */}
      </NavigationContainer>
    </IdleWrapper>
  );
};

export default AppRoot;

3. 单个页面单独使用 #

如果只需要给特定页面添加功能，直接在页面组件中引入Hook即可：

import { View, Text, Button } from 'react-native';
import { useIdleTimeout } from './hooks/useIdleTimeout';
import { useNavigation } from '@react-navigation/native';

const HomeScreen = () => {
  const navigation = useNavigation();
  const { IdleWrapper } = useIdleTimeout(3000, () => {
    navigation.navigate('Standby');
  });

  return (
    <IdleWrapper>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>首页内容</Text>
        <Button title="测试按钮" onPress={() => alert('按钮正常响应')} />
        {/* 滑块、输入框等组件都能正常交互 */}
      </View>
    </IdleWrapper>
  );
};

export default HomeScreen;

关键细节说明 #

• 为什么用TouchableWithoutFeedback？
  它默认允许事件透传，内部组件的点击、滑动事件不会被阻断，完美解决Pressable覆盖内部组件的问题。
• onMoveShouldSetResponder={() => true}
  确保滑动手势也能触发定时器重置，覆盖所有用户操作场景（触摸、点击、滑动）。
• App状态监听
  当App从后台切回前台时自动重置定时器，避免切回后直接触发超时跳转。
• 避免重复跳转
  在超时回调中判断当前路由，防止已经处于待机页时重复跳转。

内容的提问来源于stack exchange，提问作者user19539777