JavaScript
reactnative

react-navigationでAndroidのバックボタンやiosのスワイプバックを抑止する

More than 1 year has passed since last update.

やりたいこと

  • react-navigationのStackNavigatorを使っている時にヘッダーの戻るボタン以外で戻らせたくない
    • Android端末のバックボタンや、iosのスワイプバックで戻らせないようにする
  • こんな需要あるんだろうかと思うけど試してみたので書く

サンプル

Android側

  • index.android.jsのcomponentDidMountでバックボタンを押した時の動きを制御する
index.android.js
import React, { Component } from 'react';
import { AppRegistry, BackHandler } from 'react-native';
import AppNavigator from './app/navigators/AppNavigator';

const noop = () => true;
const disabledBack = () => BackHandler.addEventListener('hardwareBackPress', noop);

class ReactNativeSample extends Component {
  componentDidMount() {
    disabledBack();
  }

  render() {
    return <AppNavigator />;
  }
}

AppRegistry.registerComponent('ReactNativeSample', () => ReactNativeSample);

ios側

  • react-navigationのオプションで制御できる
app/AppNavigator.js
import { StackNavigator } from 'react-navigation';
import SampleAScreen from '../containers/SampleAScreen';
import SampleBScreen from '../containers/SampleBScreen';
import SampleCScreen from '../containers/SampleCScreen';

const AppNavigator = StackNavigator({
  SampleA: { screen: SampleAScreen },
  SampleB: { screen: SampleBScreen },
  SampleC: { screen: SampleCScreen },
}, {
  navigationOptions: {
    gesturesEnabled: false, // ここ
  },
});

export default AppNavigator;