0

我正在使用来自 Wix（版本 2 ）的 React-Native-Navigation在我的 React Native 应用程序中设置导航。我正在使用中心部分为堆栈的布局。当用户选择一个侧面菜单项时，所选视图被推送到该中心堆栈上。如果用户在 Android 上按下后退按钮，则视图将从堆栈中弹出，但我并不总是希望这种情况发生，主要是如果他们选择的视图是.sideMenuWebView

如果视图是 a WebView，我想手动处理用户按下硬件后退按钮。如果WebView可以“ goBack”，则视图将返回，但如果不能，则视图将从堆栈中弹出（正常情况下）。

我尝试使用BackHandlerfrom 类覆盖后退按钮按下react-native，这使我可以捕获该按下并在可能的情况下WebView返回，但是从堆栈中弹出视图的行为也会触发。React-Native-Navigation v2 中有没有办法告诉它，“嘿，我知道了，除非我告诉你，否则不要弹出。”？

本节我当前的代码如下：

componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.backHandler);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
}

backHandler = () => {
    if (this.state.canGoBack) {
        this.webviewRef.current.goBack();

        // I thought this might force the back press to be
        // ignored by react-native-navigation, but no dice.
        return false; 
    } else {
        // WebView can't go back so pop view like normal
        Navigation.pop(this.props.componentId);
    }
}

如果 WebView 当前无法返回，我希望这只会从堆栈中弹出视图，否则只会让 WebView 返回。

实际发生的是两个事件都发生了。即 WebView 返回，但视图也从堆栈中弹出。

4

1 回答 1

0

通过在 React Native Navigation 和 React Native 文档中进行更多挖掘，我能够找到答案。

事件订阅以相反的顺序被调用（即最后注册的订阅在前），如果一个订阅返回 true，那么之前注册的订阅将不会被调用。

所以问题出在我的backHandler方法上。false我需要返回而不是返回true。

backHandler = () => {
    if (this.state.canGoBack) {
        this.webviewRef.current.goBack();

        // We've handled the event so we return true and the
        // handler on the view's parent can effectively be ignored. Yay!
        return true;
    } else {
        // WebView can't go back so pop view like normal
        Navigation.pop(this.props.componentId);
    }
}
于 2019-01-15T16:03:18.263 回答