覆盖后退按钮 wix 反应原生导航 V2？

Posted 2023-02-16

【中文标题】覆盖后退按钮 wix 反应原生导航 V2？

【英文标题】：Override back button wix react native navigation V2?

【发布时间】：2019-08-26 21:19:42

【问题描述】：

我目前正在从 Wix RNN V1 过渡到 V2，到目前为止，我已经设法找到合适的替代 API，除了覆盖 android 上的后退按钮。

在 V1 中，我们可以传递 overrideBackPress: true 属性，然后在相应的屏幕上手动处理后退按钮的按下。

但是，在 V2 中我没有找到这样的替代品，我能找到的唯一主题是这个线程：

https://github.com/wix/react-native-navigation/issues/4217

我已经在那里实施了建议，但即使应该覆盖 Wix 导航，它仍然会自动关闭屏幕。

任何已知的解决方案？

【问题讨论】：

我也遇到了同样的问题。有没有运气找到解决方案？

【参考方案1】：

我遇到了同样的问题，我可以在两个平台上覆盖回压行为的唯一方法是用自定义按钮替换左后退按钮，并将 react native 的 BackHandler 用于 Android 中的硬件按钮。代码如下。

组件 A

//Navigate to component B from A
Navigation.push(this.props.componentId, 
component: 
    name: 'ComponentB',
    options: 
        topBar: 
            leftButtons: [
                id: 'backPress',
                text: 'Back',
                icon: require('backbutton.png')
            ]
        ,
    

);

组件 B

import React,  PureComponent  from 'react';
import  View, BackHandler  from 'react-native';
import  Navigation  from 'react-native-navigation';

export default class ComponentB extends PureComponent 

constructor(props) 
    super(props);
    Navigation.events().bindComponent(this);


componentDidMount() 
    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);


componentWillUnmount() 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);


navigationButtonPressed( buttonId ) 
    switch (buttonId) 
        case 'backPress': 
            this.handleBackPress();
            break;
        
    


handleBackPress = () => 
    //Custom logic

    //Go back if required
    Navigation.pop(this.props.componentId)

    //Stop the default navigation
    return true;
;

//Render component
render() 
    return (<View></View>);

【参考方案2】：

你可以使用registerScreenPoppedListener:

Navigation.events().registerScreenPoppedListener((event) => 
    if (event.componentId === "my-screen-id") 
        // do something
    
);