2019-03-18 react-navigation 某个特定

1.我觉得比较好的方法，因为iOS完美的实现登录页是一种presentview的感觉，但是Android那边就没有效果了，都是push动画，代码参考识兔
下面贴一部分代码吧

const IOS_MODAL_ROUTES = ['Login'];

const dynamicModalTransition = (transitionProps, prevTransitionProps) => {
  const isModal = IOS_MODAL_ROUTES.some(
    screenName =>
      screenName === transitionProps.scene.route.routeName ||
      (prevTransitionProps && screenName === prevTransitionProps.scene.route.routeName)
  );
  return StackViewTransitionConfigs.defaultTransitionConfig(transitionProps, prevTransitionProps, isModal);
};

const AppNavigator = createStackNavigator(
  {
    Main: { screen: HomeNavigator },
    ...Pages,
  },
  {
    headerMode: 'none',
    transitionConfig: Platform.OS === 'ios' ? dynamicModalTransition : StackViewStyleInterpolator.forHorizontal,
  }
);

这个效果，我觉得挺好的啊。。。奈何我不是领导，非要Android和iOS动画保持一致....两个不同的系统好吗！！！非要一致直接H5 啊....

下面是我找了好久的，勉强实现了动画一致，但是我觉得挺难看的，but，领导觉得还可以...就写下来记录一下（也是搜了好多资料），这边的注释也要仔细看下哦，不然你可能看不明白我在写什么

//Settings.js
//比如在设置页面要特殊弹出登录页，那就在设置页面要弹出登录页的方法里面写
gotoLogin = () => {
    NavigationService.navigate('Login',  {    //NavigationService是自己封装了一下的，
      transition: 'myCustomTransition'          //也就是到下个页面的时候传参
    })
  }

在router.js中，这边其实也就是不是 modal 动画，就是一个单纯的从下往上，但是他之前那个页面会往左滑一下，左滑一下啊，什么鬼 ，丑的一**

const AppNavigator = createStackNavigator(
  {
    Main: { screen: HomeNavigator },
    ...Pages,
  },
  {
    headerMode: 'none',
    transitionConfig: () => ({
      transitionSpec: {
        duration: 300,
        easing: Easing.out(Easing.poly(4)),
        timing: Animated.timing,
      },
      screenInterpolator: sceneProps => {
        const { scene } = sceneProps
        const {route} = scene;
        const params = route.params || {};
        const transition = params.transition || 'default';  
        
        return {default: StackViewStyleInterpolator.forHorizontal(sceneProps),
        myCustomTransition: StackViewStyleInterpolator.forVertical(sceneProps)
        }[transition];
        
      },
    })
  }
);