Javascript 检查React本机应用程序的不活动状态

检查不活动状态并执行我正在使用的一些函数。在父屏幕上的实现如下所示

render() {
        return (
            <InteractionProvider
                timeout={AppConfigurations.appInactivityTimeThreshold * 1000}
                onActive={() => this.onNotIdle()}
                onInactive={() => this.onIdle()}
            >
                <View style={styles.mainContainer}>
                    /..
                </View>
            </InteractionProvider>
        );
}

onIdle() {
    console.log("MAIN IDLE!");
    this.idleWarningModal.showModal();
}

onNotIdle() {
    console.log("MAIN NOT IDLE!");
}

render（）{
返回(
this.onNotIdle（）}
onInactive={（）=>this.onIdle（）}
>
/..
);
}
onIdle（）{
log（“主空闲！”）；
this.idleWarningModal.showModal（）；
}
onNotIdle（）{
log（“主不空闲！”）；
}

这个很好用。当您导航到另一个视图并返回此父视图时，会出现问题，计时器似乎不会停止，如果已达到时间阈值，则返回父屏幕时，

onIdle

方法会立即触发

---

如何避免这种情况？谢谢。

最后自己用

PanResponder

来检查每个组件中的触摸。当遍历到子视图时，父视图的

PanResponder

作为

prop

传递，并设置为子视图的

view

组件，与它自己的

PanResponder

一起

例：

render（）{
返回(
//子内容
);
}

---

不是最复杂的修复方法，但适用于我的实例。

这只是一个想法，但您可以使用？它可能会帮助你。。。但这是纯js，而不是react@Margon谢谢我将对此进行调查。嘿，我在使用这个库时遇到了同样的问题，当导航到另一个屏幕时，无法停止家长的非活动计时器。当我们继续推进导航堆栈时，多个屏幕处于非活动状态。PANResponder与儿童道具配合得好吗？

render() {
        return (
            <View style={styles.mainContainer}
                  collapsable={false}
                  {...this.props.mainPagePanResponder.panHandlers}
                  {...this.childPagePanResponder.panHandlers}>
                //Child Content
            </View>
        );
}