[React-Native] React-navigation 4.x createAnimatedSwitchNavigator 切换问题

近期遇到一个问题,使用createAnimatedSwitchNavigator 创建的时候, 发现navigate跨栈到别的路由, 会出现下一个页面和上一个页面重叠问题

这个主要还是由于动画设置不对造成的
原代码

const AppNavigators = (initRoutename = 'AD') => {
  return createAnimatedSwitchNavigator(
    {
      Init: InitNavigator,
      AD: ADNavigator,
      Main: MainNavigator,
    },
    {
      initialRouteName: initRoutename,
      navigationOptions: {
        header: null,
      },
      transition: (
        <Transition.Together>
          <Transition.Out type="fade" durationMs={300} interpolation="linear" />
          <Transition.In type="fade" durationMs={400}  interpolation="linear" />
        </Transition.Together>
      ),
    },
  );
};

---

修改后

const AppNavigators = (initRoutename = 'AD') => {
  return createAnimatedSwitchNavigator(
    {
      Init: InitNavigator,
      AD: ADNavigator,
      Main: MainNavigator,
    },
    {
      initialRouteName: initRoutename,
      navigationOptions: {
        header: null,
      },
      transition: (
        <Transition.Together>
          <Transition.Out type="fade" durationMs={10} interpolation="linear" />
          <Transition.In type="fade" durationMs={80}  interpolation="linear" />
        </Transition.Together>
      ),
    },
  );
};

这里主要还是动画进退的时间差太小造成的, 导致两个重叠在一起, 看起来像是Bug

或者 你就干脆直接使用

createSwitchNavigator 



笑死了 🤣