切换选项卡时未触发 setOnNavigatorEvent 回调

Question

我正在开发由 react-native@0.55.4 和 react-native-navigation@1.1.474 提供支持的应用程序。

最初，只有一个登录屏幕（使用 Navigation.startSingleScreenApp）。当用户登录时，我调用 Navigation.startTabBasedApp（选项卡组件之一是我的 NavScreen）。每当用户更改到另一个选项卡时，应该显示选项卡堆栈的根，所以我尝试了这样的事情：

class NavScreen extends React.PureComponent {
    constructor(props) {
        super(props)
        this.props.navigator.setOnNavigatorEvent(this.toRootOnTabSelect.bind(this))
    }

    toRootOnTabSelect(event) {
        const {id} = event
        if (["bottomTabSelected", "bottomTabReselected"].includes(id)) {
            this.props.navigator.popToRoot({
                animated: true,
                animationType: "fade",
            })
        }
    }

    render() {
        return <Text>Whatever...</Text>
    }
}

但由于某些原因，当我更改选项卡时（通过单击它们 - 而不是通过调用 switchToTab API 方法），我的 toRootOnTabSelect 事件处理程序方法没有被调用。

我在网上找到了多个帖子（即 , https://github.com/wix/react-native-navigation/issues/648）表明它应该可以工作，所以我不知道我错过了什么。 :/

非常感谢任何帮助！ :)

Answer 1

可能导致这种情况的原因之一是将 setOnNavigatorEvent 与 addOnNavigatorEvent 结合使用，如果您有实现 addOnNavigatorEvent 的屏幕包装器组件，您当前的侦听器将无法工作。

如documentation

所述

setOnNavigatorEvent Can not be used in conjuction with addOnNavigatorEvent

还有

Bear in mind that you can't use both addOnNavigatorEvent and setOnNavigatorEvent. addOnNavigatorEvent returns a function, that once called will remove the registered handler.

我建议尝试 addOnNavigatorEvent 而不是 setOnNavigatorEvent

Answer 2

这似乎是 react-native-navigation@^1.1.474 中的错误（注意插入符号）：请参阅 my issue on GitHub。

according pull request 已打开但尚未合并。 :(

切换选项卡时未触发 setOnNavigatorEvent 回调

setOnNavigatorEvent callback not fired when switching tabs

javascript

react-native

react-native-navigation

wix-react-native-navigation