React Native Navigation 根据来源不同的动画

Question

我正在努力让以下内容发挥作用。 共有 3 个屏幕：

1. 屏幕 A
2. 屏幕 B
3. 屏幕 C

我想要 A 去 C 时和 B 去 C 时不同的动画。有人知道怎么做吗？

Answer 1

您可以使用这个库：rn-transitions。因此，根据文档，您可以向特定页面添加特定转换，例如：

import { fromLeft, zoomIn, zoomOut } from 'react-navigation-transitions'

const handleCustomTransition = ({ scenes }) => {
  const prevScene = scenes[scenes.length - 2];
  const nextScene = scenes[scenes.length - 1];

  // Custom transitions go there
  if (prevScene
    && prevScene.route.routeName === 'ScreenA'
    && nextScene.route.routeName === 'ScreenB') {
    return zoomIn();
  } else if (prevScene
    && prevScene.route.routeName === 'ScreenB'
    && nextScene.route.routeName === 'ScreenC') {
    return zoomOut();
  }
  return fromLeft();
}

const PrimaryNav = createStackNavigator({
  ScreenA: { screen: ScreenA },
  ScreenB: { screen: ScreenB },
  ScreenC: { screen: ScreenC },
}, {
  transitionConfig: (nav) => handleCustomTransition(nav)
})

希望这对您有所帮助。有疑问请随意