Question

如果用户未与应用程序交互1分钟，我想要的是显示图像。我已经尝试通过在所有用户事件上设置定时器来实现它，例如onPress onSwipe等所有元素。但处理这些是一个复杂的过程。然后我尝试使用InteractionManager，但也没有成功。我想知道的是有什么方法可以让我知道是否发生了任何用户事件？

Answer 1

最后，我使用PanResponder完成了它。它完美无缺。它需要按键和按键和拖动。

Expo Link：https://snack.expo.io/Sy8ulr8B-

这是我的代码：

Equals

Answer 2

这是我如何通过react-navigation Custom Navigator实现非活动侦听器。我使用本机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;

让用户在本机反应中不活动

2 个答案: