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

【问题标题】：setOnNavigatorEvent callback not fired when switching tabs切换选项卡时未触发 setOnNavigatorEvent 回调
【发布时间】：2018-07-07 18:04:46
【问题描述】：

我正在开发一个由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>
    }
}

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

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

非常感谢任何帮助！ :)

【问题讨论】：

标签： javascript react-native react-native-navigation wix-react-native-navigation

【解决方案1】：

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

如documentation中所述

setOnNavigatorEvent不能与addOnNavigatorEvent结合使用

还有

请记住，您不能同时使用addOnNavigatorEvent 和setOnNavigatorEvent。 addOnNavigatorEvent 返回一个函数，一旦调用该函数将删除注册的处理程序。

我建议尝试addOnNavigatorEvent 而不是setOnNavigatorEvent

【讨论】：

我尝试使用addOnNavigatorEvent ，但这并没有改变我的情况。我还搜索了我的代码，并没有在其他任何地方找到addOnNavigatorEvent，所以使用两者应该不是问题。我还注释掉了所有其他出现的setOnNavigatorEvent ，以确保它不会在同一个导航器实例上被调用两次，但这也没有帮助:(

【解决方案2】：

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

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

【讨论】：