ReactNavigationで遷移先に渡した値を this.props.hoge で参照したいとき

ReactNavigationで遷移先の画面に値を渡したいとき、

navigate('SecondScreen', { user: 'Hoge' })

のように指定すれば渡せますが、遷移先で値はthis.props.navigation.state.pramas.userに入ります。

そうではなく this.props.user に入っていてほしかったので調べたところ、以下のようにすれば解決しました。

const mapNavigationStateParamsToProps = (ScreenComponent) => {
  return class extends React.Component　{
    static navigationOptions = ScreenComponent.navigationOptions;
    render() {
      const { params } = this.props.navigation.state;
      return <ScreenComponent {...this.props} {...params} />;
    }
  };
};

const MainNavigator = StackNavigator({
  firstScreen: { screen: mapNavigationStateParamsToProps(FirstScreenComponent) },
  secondScreen: { screen: mapNavigationStatePramasToProps(SecondScreenComponent) }
});

参考: github.com