やりたいこと
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"