javascript - 如何在每个用户操作上运行一个函数？

Question

我正在开发一个 React Native kiosk 应用程序，它将在安装在墙上的 Android 平板电脑上运行。我们想实现一种“屏幕保护程序”功能——如果用户在 30 秒内没有触摸屏幕，我们想淡出一个漂亮的启动画面，然后在触摸时切换回主 UI屏幕。

我在重置“屏幕保护程序”倒计时时遇到问题。在 Web 上，我会在应用程序的根目录附近使用点击或鼠标移动处理程序来处理此问题，该处理程序会在用户执行任何操作时分派(dispatch)，例如...

let timeout = setTimeout(startScreenSaver, 30000);
document.body.addEventListener("click", () => {
  clearTimeout(timeout);
  setTimeout(startScreenSaver, 30000);
});

有没有办法在 React Native 中做类似的事情？

Answer 1

您可以在 Root View 组件上设置 onTouchStart 属性，当您触摸 View 时事件发生。

例如，

onTouchStart = () => {
   clearTimeout(timeout);
   setTimeout(startScreenSaver, 30000);
}

render() {
  <View onTouchStart={this.onTouchStart}>
    ...
  </View>
}