Javascript 反应本机倾听所有事件

Javascript 反应本机倾听所有事件,javascript,mobile,react-native,event-listener,Javascript,Mobile,React Native,Event Listener,我正在我的应用程序中创建空闲计时器,我想在每次单击、滚动等时重置计时器。在每次onPress事件中调用我的resetTimer()函数似乎毫无意义。在web中,我会使用事件侦听器,如:$(文档).mousemove(),$(文档).mousedown(),$(文档).scroll()等 关于在React native中的任何触摸事件上使用顶级事件监听器调用resetTimer()的任何建议?我认为没有官方的API 作为研究如何使用的一部分,我们做了一个猴子修补模块定义的\uu fBatchedB

我正在我的应用程序中创建空闲计时器,我想在每次单击、滚动等时重置计时器。在每次onPress事件中调用我的
resetTimer()
函数似乎毫无意义。在web中,我会使用事件侦听器,如:
$(文档).mousemove()
$(文档).mousedown()
$(文档).scroll()等


关于在React native中的任何触摸事件上使用顶级事件监听器调用
resetTimer()
的任何建议?

我认为没有官方的API

作为研究如何使用的一部分,我们做了一个猴子修补模块定义的
\uu fBatchedBridge
全局的实验,以侦听来自本地的所有全局事件

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


当然,它会变得脆弱和粗糙:)

经过一天的研究,我发现包含
TouchEventUtils
(facebook在他们的react本机测试中使用它),它允许使用不同的触摸事件状态函数(
onTouchMove(event)
onTouchStart(event)
onTouchEnd(事件)

所以我所做的是:

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>
        )
    }
}
/*我导入的其余内容*/
从“fbjs/lib/TouchEventUtils”导入TouchEventUtils;
类根扩展组件{
onTouchStart(){
//正确重置会话计时器的代码
}
render(){
返回(
{/*我的路线*/}
)
}
}

就是这样,这就是访问顶级事件侦听器并对每个事件执行操作的解决方案。我没有深入挖掘(因为这对于我的案例来说已经足够了),所以我不确定它得到了什么对象,以及它是否可以帮助识别任何进一步的属性(即记录单击的元素)。

很高兴再次见到你(我们已经遇到@Cycle.js conf)!:)很好的建议,正如你所说的有点老套,但我认为我需要的已经足够了。:)哈哈,这太有趣了,正是在CycleConf,我第一次开发了这个黑客。我不认识你的名字,不过,纯粹是巧合:)谢谢!这正是我需要的屏保功能。请注意,导入TouchEventUtils并不是必需的。onTouchStart是视图组件的内置支持道具。你是我的救星!!