React native侦听所有事件

React native listen to all events

本文关键字：事件 native React      更新时间：2023-09-26

我正在我的应用程序中创建空闲计时器，我想在每次点击、滚动等时重置计时器。在每次onPress事件中调用我的resetTimer()函数似乎是无稽之谈。在网络中，我会做一些事件监听器，比如：$(document).mousemove()、$(document).mousedown()、$(document).scroll()等等。

关于让一些顶级事件监听器在React native中的任何触摸事件上调用resetTimer()，有什么建议吗？

经过一天的rect原生代码研究，我发现fbjs包含TouchEventUtils（facebook在其react原生测试中使用它），它允许使用不同的触摸事件状态函数（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>
        )
    }
}

就是这样，这就是访问顶级事件侦听器并在每个事件上做一些事情的解决方案。我没有深入挖掘（因为这对我的案例来说已经足够了），所以我不确定它得到了什么对象，也不确定它是否有助于识别任何进一步的属性（即记录点击的元素）。

我认为没有官方的API。

作为研究如何将Cycle.js与React Native一起使用的一部分，我们在monkey上对BatchedBridge模块定义的__fbBatchedBridge全局进行了修补实验，以监听来自本机端的所有全局事件。

它不适合我们，因为我们得到的都是原始的触摸事件，不可能过滤不同类型的事件。但是，如果你确实想知道什么时候发生任何触摸事件，那么这个解决方案可能对你有用。

当然，它会变得脆弱和粗糙：）

相关文章：