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

やりたいこと

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

サンプル

Android側

• index.android.jsのcomponentDidMountでバックボタンを押した時の動きを制御する
  • componentWillMountだとreact-navigationのバックボタンの制御に上書かれてしまう
  • バックボタンの制御は後勝ち
  • 詳しくはこちら
  • 　https://qiita.com/ozaki25/items/93ca8d4dac06cf48ed05

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;