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

Question

I am currently transitioning from Wix RNN V1 to V2, and so far I've managed to find the appropriate replacement APIs, except for overriding the back button on Android.

In V1 we could pass the overrideBackPress: true attribute, and then handle back button presses manually on the cooresponding screen.

However, in V2 I've found no such replacement, and the only topics I could find were this thread:

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

I've implemented the suggestions there, but Wix navigation is still automatically closing screens even though it should be overwritten.

Any known a solution for this?

Answer 1

I had the same issue and the only way i could override the backpress behavior on both platforms is to replace the left back button with custom button and use the BackHandler of react native for the hardware button in Android. The code is as below.

Component 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')
            }]
        },
    }
}
});

Component 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>);
}
}

Answer 2

You can use registerScreenPoppedListener :

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