如何阻止Android硬件后退按鈕在react-native的react-navigation中運行？

Question

我正在開發一個瑣事游戲，我正在使用反應導航來處理導航，我有3個組件，（新游戲，問題，結果）我不希望用戶回到結果頁面的問題，如果沒有。 問題已經用盡，然而，按下后退按鈕（Android硬件）正在將他帶回問題。 然后，我嘗試處理硬件后退按鈕，如下所示：

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

但是，這會將用戶帶到NewGame屏幕，但是立即回彈到結果頁面，因為它在NewGame頁面中立即觸發NAVIGATION / BACK。 這又將其帶回結果頁面。

可能的修復？

我想在登陸NewGame組件頁面后停止后退按鈕。 有辦法嗎？

我的環境

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

Answer 1

您需要返回true表示您已經自己處理了后退按鈕，就像您在文檔中看到的那樣。

如果一個訂閱返回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 eventlistener，如下所示：

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

下面是一些示例代碼，有助於查看更多用途，而不僅僅是停止后退按鈕的運行：

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

當用戶在StackNavigator中的屏幕之間切換時默認有一個后退按鈕，我們可以通過設置：headerLeft to null來修復它

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