【react-navigation】DrawerNavigatorだとparamsが渡されない

何が起きたか

react-navigationにて
DrawerNavigatorを使用した場合、現状（v2.5.5）だとパラメータが渡されない。

以下の場合、DrawerNavigatorであるMainのHomeにparamsを設定しても、View内でparamsが消えてしまう。

route.jsx

const Main = createDrawerNavigator({
  Home: {
    screen: HomeScreen,
  },
  MyPage: {
    screen: MyPageScreen,
  },
}, {
  initialRouteName: 'Home'
});

export const Root = createStackNavigator({
  Main: {
    screen: Main,
  },
}, {
  initialRouteName: 'Main',
});

この状態で、navigate()でページ遷移したときに

NavigationActions.navigate({
    'MyPage',
    params: {
      title: 'タイトル', 
      uri: '/uri',
    },
  })

paramsの値をMyPageScreenのView内で出力してもundefinedとなる。

原因

結構前（１年以上前）から発生しているようす。関連するissueが立ちまくっている

https://github.com/react-navigation/react-navigation/issues/3250
https://github.com/react-navigation/react-navigation/issues/143

対応方法

DrawerNavigatorをRootNavigatorにするとparamsが渡されない。
なので、ワンクッションNavigatorをかまして、DrawerNavigator以外でparamsを扱うViewを定義する

このコメントを参考に。

Page2にparamsを渡したい場合

const Main = createDrawerNavigator({
  Home: {
    screen: HomeScreen,
  },
  // MyPageを移動する
}, {
  initialRouteName: 'Home'
});

const RootMain = createStackNavigator({
  Drawer: {
    screen: Main,
  },
  // MyPageを追加
  MyPage: { 
    screen: MyPageScreen,
  },
}, {
  initialRouteName: 'Drawer',
});


export const Root = createStackNavigator({
  Main: {
    screen: RootMain,
  },
}, {
  initialRouteName: 'Main',
});

こうすると

NavigationActions.navigate({
    'MyPage',
    params: {
      title: 'タイトル', 
      uri: '/uri',
    },
  })

MyPageScreenのView内にparams.titleやparams.uriが渡され、使えるようになる

あまりキレイな形ではないが、これでやりたいことは実現できる。