React Native 监听所有事件。

Question

我正在创建我的应用程序中的空闲计时器，并希望在每次点击、滚动等操作时重置计时器。在每个 onPress 事件上调用 resetTimer() 函数似乎是无意义的。在 web 上，我会使用事件监听器，如：$(document).mousemove()、$(document).mousedown()、$(document).scroll() 等。

对于在 React Native 中进行任何触摸事件的情况下都能够调用 resetTimer() 的一些顶级事件监听器，您有什么建议吗？

- Mindaugas

Answer 1

经过一天的研究，我发现 fbjs 包含了 TouchEventUtils（Facebook 在他们的 React Native 测试中使用它），它允许使用不同的触摸事件状态函数（onTouchMove(event)、onTouchStart(event)、onTouchEnd(event)）。

那么我做了什么：

npm install fbjs --save

我只需要在包裹我的路由的顶层根组件中添加onTouchStart即可，因此我覆盖了所有屏幕，因为我在所有屏幕/视图包装器上使用它。

所以我的代码看起来像这样：

/* rest of my imports */
import TouchEventUtils from 'fbjs/lib/TouchEventUtils';

class Root extends Component {

    onTouchStart(){
        //my code to properly reset session timer
    }

    render() {
        return (
            <View
                onTouchStart={this.onTouchStart}
            >
                {/*My routes*/}
            </View>
        )
    }
}

就是这样，这就是访问顶层事件监听器并在每个事件上执行某些操作的解决方案。我没有深入研究（因为这对我的情况已经足够了），所以我不确定它获取什么对象以及是否可以帮助识别任何其他属性（例如记录点击的元素）。

- Mindaugas

---

谢谢！这正是我需要的屏幕保护功能。 - pmont

注意，导入TouchEventUtils是不必要的。onTouchStart是View组件的内置支持属性。 - pmont

你是我的救星！！ - Bigdragon

Answer 2

我认为这方面没有官方的API。

作为调查如何在React Native中使用Cycle.js的一部分，我们尝试对由BatchedBridge模块定义的__fbBatchedBridge全局进行猴子补丁以监听来自本机端的所有全局事件。

这对我们来说不太适用，因为我们得到的只是原始的触摸事件，并且无法过滤不同类型的事件。但是，如果您确实想知道何时发生任何触摸事件，则该解决方案可能适合您。

当然，这种方法可能会很脆弱和hacky :)

- jevakallio

---

很高兴再次见到你（我们在Cycle.js大会上见过）！ :) 好建议，有点hacky就像你说的，但我觉得这正是我需要的。 :) - Mindaugas

哈哈，太有趣了，我第一次开发这个黑客攻击就是在CycleConf上完成的。虽然不认识你的名字，但只是纯粹的巧合 :) - jevakallio