React Native - デバイスのバックボタンの処理

Question

デバイスのバックボタンが押されたときに、複数の画面がスタックしているかどうかを確認します。はいの場合は前の画面を表示し、いいえの場合はアプリを終了します。

多くの例を確認しましたが、BackAndroidとNavigatorを使用しています。しかし、両方とも推奨されていません。 BackHandlerはBackAndroidの代替品です。 props.navigation.goBack（null）を使用して前の画面を表示できます。

しかし、スタック内の画面数を見つけるコードを見つけることができません。非推奨のNavigatorを使用したくありません！

Answer 1

この例では、ほとんどのフローで一般的に予想されるナビゲーションを表示します。予想される動作に応じて、次のコードをすべての画面に追加する必要があります。 2つのケースがあります： 1.スタックに1つ以上のスクリーンがある場合、デバイス戻るボタンは前のスクリーンを表示します。 2.スタックに1つの画面しかない場合、デバイス戻るボタンはアプリを終了します。

ケース1：前の画面を表示

import { BackHandler } from 'react-native'; 

constructor(props) { 
    super(props) 
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this); 
} 

componentWillMount() { 
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick); 
} 

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

handleBackButtonClick() { 
    this.props.navigation.goBack(null); 
    return true; 
} 

重要：はコンストラクタでメソッドをバインドすることを忘れてはいけないとcomponentWillUnmountでリスナーを削除します。

ケース2：この場合は、終了のApp

、アプリを終了することを、画面には何も対処する必要はありません。

重要：これはスタック上にのみ表示する必要があります。スタックに積層つ以上の画面が存在する場合に

Answer 2

constructor(props){ 
    super(props) 
    this.onBackPress = this.onBackPress.bind(this); 
} 

componentWillMount() { 
     BackHandler.addEventListener('hardwareBackPress', this.onBackPress); 

} 

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

onBackPress(){ 
    const {dispatch, nav} = this.props; 
    if (nav.index < 0) { 
     return false; 
    } 
    dispatch(NavigationActions.back()); 
    return true; 
} 

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

Answer 3

、反応ネイティブのデフォルトバックボタンの動作は、スタック内の前の画面に戻ってナビゲートすることです。アプリを終了するための画面が1つしかないときにデバイス戻るボタンを押すと、カスタム設定が必要です。これは、特定のStackNavigatorのルータのgetStateForActionメソッドを変更することによって、各スクリーンに処理コードを追加する必要なく達成できます。

は、アプリケーション

const ScreenStack = StackNavigator(
    { 
    'Screen1': { 
     screen: Screen1 
    }, 
    'Screen2': { 
     screen: Screen2 
    }, 
    }, 
    { 
    initialRouteName: 'Screen1' 
    } 
); 

スタックナビゲータのルータのgetStateForAction方法が期待されるバック動作を実現するために、次のように修正することができ、以下のStackNavigatorを使用していると仮定します。

const defaultStackGetStateForAction = 
    ScreenStack.router.getStateForAction; 

ScreenStack.router.getStateForAction = (action, state) => { 
    if(state.index === 0 && action.type === NavigationActions.BACK){ 
    BackHandler.exitApp(); 
    return null; 
    } 

    return defaultStackGetStateForAction(action, state); 
}; 

state.indexスタック内の1つの画面がある場合にのみ0なります。