React-navigation で特定のscreenのtransitionアニメーションだけ変更する

問題意識

stackNavigation内で特定のページだけ遷移時のアニメーションを変えたかったりする。
が、ぱっとやり方が見当たらなかったのでメモ

方法1

ナビゲーションをネストする
https://github.com/react-navigation/react-navigation/issues/707#issuecomment-299859578

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 },
  },
  {
    mode: 'modal',
    headerMode: 'none',
  },
);

若干面倒だけれども、シンプルでわかりやすい

方法2

transitionConfigでスクリーン名指定で書き換える
https://github.com/react-navigation/rfcs/issues/10
※ もっとスマートな方法が今後議論されるかも。。されないかも。。

navigationOptions: {
  transitionConfig: () => ({
    screenInterpolator: props => {
      // Transitioning to search screen (navigate)
      if (props.scene.route.routeName === 'Search') {　//遷移するページを指定して、、
        return CardStackStyleInterpolator.forFade(props); //遷移のアニメーションを指定
      }

      const last = props.scenes[props.scenes.length - 1];

      // Transitioning from search screen (goBack)
      if (last.route.routeName === 'Search') {
        return CardStackStyleInterpolator.forFade(props);
      }

      return CardStackStyleInterpolator.forHorizontal(props);
    },
  }),
}

CardStackStyleInterpolatorは下記にあります。function forInitialはexportされていないので、使うなら　forkするなりなんなりするのがいいかもしれない。

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'

apendix

もっと複雑なtransitionはどうなるのやら
https://github.com/react-navigation/react-navigation/issues/175

結論

取り急ぎ方法2でしのいでいますが、もっといいやり方あれば教えて欲しいです。

追記 20180608

v2では少し変わっている
https://github.com/react-navigation/react-navigation/issues/4173