How to stop the Android Back Button function from working in interactive navigation to respond?

Question

I am developing a trivial game, I use interactive navigation for navigation, I have 3 components (newGame, Questions, Results). I do not want the user to return to questions from the results page, if not. The questions are settled, however, pressing the "Back" button (Android Hardware) returns it to the questions. Then I tried to process the equipment feedback button as follows:

componentWillMount() {
      this.props.gameState(true);
      BackHandler.addEventListener('hardwareBackPress', () => {
        if (this.props.gamePlaying) { // Currently set to true. I will set it to false again on NewGame Page.
          this.props.navigation.navigate('NewGame');
        }
      });
    }

However, this brings the user to the NewGame screen, but immediately returns to the results page, as he immediately launches NAVIGATION / BACK on the NewGame page. This returns him to the results page again.

Possible fix?

"" , NewGame. ?

- = ^ 1.0.0-beta.11 react-native = 0.44.0

Answer 1

true, , "", docs.

true, , ,

:

componentWillMount() {
    this.props.gameState(true);
    BackHandler.addEventListener('hardwareBackPress', () => {
        if (this.props.gamePlaying) {
            this.props.navigation.navigate('NewGame');
            return true; // This will prevent the regular handling of the back button
        }

        return false;
    });
}

Answer 2

- BackHandler , :

BackHandler.addEventListener('hardwareBackPress', () => {
    const { dispatch, nav } = this.props
    if (nav.routes.length === 1 && (nav.routes[0].routeName === 'Login' || nav.routes[0].routeName === 'Start')) return false
    dispatch({ type: 'Navigation/BACK' })
    return true
})

, . true false . false . true .

, :

BackHandler.addEventListener('hardwareBackPress', () => {
    const { dispatch, nav } = this.props
    if (nav.routes[0].routeName === 'TriviaQuestion') return false
    if (!playTimeLeft && (nav.routes[0].routeName === 'TriviaQuestion')) return false
    if (nav.routes[0].routeName === 'InvasiveDialog') return false
    dispatch({ type: 'Navigation/BACK' })
    return true
})

, , Back:

import React, { Component } from 'react'
import { Platform, BackHandler } from 'react-native'
import { Provider, connect } from 'react-redux'
import { addNavigationHelpers } from 'react-navigation'
import { NavigationStack } from './navigation/nav_reducer'
import store from './store'

class App extends Component {
    componentWillMount() {
        if (Platform.OS !== 'android') return
        BackHandler.addEventListener('hardwareBackPress', () => {
            const { dispatch, nav } = this.props
            if (nav.routes.length === 1 && (nav.routes[0].routeName === 'Login' || nav.routes[0].routeName === 'Start')) return false
            dispatch({ type: 'Navigation/BACK' })
            return true
        })
    }

    componentWillUnmount() {
        if (Platform.OS === 'android') BackHandler.removeEventListener('hardwareBackPress')
    }

    render() {
        const { dispatch, nav } = this.props
        const navigation = addNavigationHelpers({
            dispatch,
            state: nav
        })
        return <NavigationStack navigation={navigation} />
    }
}

const mapStateToProps = ({ nav }) => ({ nav })
const RootNavigationStack = connect(mapStateToProps)(App)

const Root = () => (
    <Provider store={store}>
        <RootNavigationStack />
    </Provider>
)

export default Root

, "" , . , , , , .

Redux, , .

NavigationStack export const NavigationStack = StackNavigator({ ...etc }) .

Answer 3

When the user switches between screens in StackNavigator, the "Back" button is used by default, we can fix it by setting: headerLeft to null

static navigationOptions =({navigation}) => {
    return {
        title: 'Rechercher une ville',
        headerLeft: null,
    }  
}