Javascript 反应本机倾听所有事件
我正在我的应用程序中创建空闲计时器,我想在每次单击、滚动等时重置计时器。在每次onPress事件中调用我的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
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是视图组件的内置支持道具。你是我的救星!!