SwitchNavigator中的屏幕在导航时闪烁。

Question

在我的react native应用中，我有一个开关导航器来在Auth Stack和App Stack之间导航。

const AppNavigator = createSwitchNavigator(
  {
    App: AppStack,
    Auth: AuthStack
  },
  {
    initialRouteName: "Auth",
  }
);

但当我从AuthStack进入AppStack时，它就会闪烁，屏幕向上移动。我如何防止这种行为，增加一个平滑的过渡。

Answer 1

我可以通过使用animatedswitchnavigator代替普通的switchnavigator并添加一个过渡来解决这个问题。

import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';
import { Transition } from 'react-native-reanimated';

const AppNavigator = createAnimatedSwitchNavigator(
  {
    App: AppStack,
    Auth: AuthStack
  },
  {
    initialRouteName: "Auth",
    transition: (
      <Transition.Together>
        <Transition.Out
          type="slide-bottom"
          durationMs={400}
          interpolation="easeIn"
        />
        <Transition.In type="fade" durationMs={500} />
      </Transition.Together>
    ),
  }
);

文件在这里找到。https:/reactnavigation.orgdocs4.xanimated-switch-navigator。