React Navigationで特定画面のみモーダルにする

やりたいこと

React Navigationで特定画面のみモーダルにしたい

やり方

StackNavigator(modal) > StackNavigator(card) のネスト構造にして、initialRouteNameをStackNavigator(card)にすることで実現。こんな感じ。

const MainCardNavigator = StackNavigator(
  {
    Home: { screen: Home },
    CardScreen1: { screen: CardScreen1 },
    CardScreen2: { screen: CardScreen2 },
  },
  {
    headerMode: 'none',
  },
);

const MainModalNavigator = StackNavigator(
  {
    MainCardNavigator: { screen: MainCardNavigator }
    ModalScreen1: { screen: ModalScreen1 },
    ModalScreen2: { screen: ModalScreen2 },
  },
  {
    initialRouteName: 'MainCardNavigator',
    mode: 'modal',
    headerMode: 'none',
  },
);

元ネタ：https://github.com/react-community/react-navigation/issues/707

エラー

TabNavigator > StackNavigator > StackNavigatorの3層でネストすると「Cannot read property undefined of undefined」エラーが発生しました。

対策

• navReducerを以下のように修正することで解決。NavigationActions.init()がポイント。
• redux/react-navigation公式を元にしてます：

let initialState = nav.router.getStateForAction(
  NavigationActions.init()
);
const firstAction = nav.router.getActionForPathAndParams('MainCardNavigator')
initialState = nav.router.getStateForAction(
  firstAction,
  initialState
);
export default (state = initialState, action) => {
  const nextState = nav.router.getStateForAction(action, state);

  return nextState || state;
};

環境

• "react": "16.0.0-beta.5",
• "react-native": "^0.49.3",
• "react-navigation": "^1.0.0-beta.13",
• "react-redux": "^5.0.6",
• "redux": "^3.7.2"

参考

• https://github.com/react-community/react-navigation/issues/707
• https://github.com/react-community/react-navigation/issues/1919
• https://github.com/react-community/react-navigation/issues/2456