如何在没有动画的反应导航中将新卡推入堆栈导航器？

Question

我正在尝试将新屏幕推送到 StackNavigator，但没有动画。我需要立竿见影的效果。我正在浏览文档，但我很难辨别如何为 StackNavigator 配置转换。我只需要为一条特定路线禁用动画。

在 this page 的 StackNavigatorConfig 部分，我看到一些概述的配置对象，例如 transitionConfig，它们看起来很有潜力..？但是如何找到有关如何使用这些对象的说明？

Answer 1

根据issue 1120，目前无法禁用动画。

并且transitionConfig没有很好的文档，可以找到它的定义here

export type NavigationTransitionSpec = {
  duration?: number,
  // An easing function from `Easing`.
  easing?: (t: number) => number,
  // A timing function such as `Animated.timing`.
  timing?: (value: AnimatedValue, config: any) => any,
};

/**
 * Describes a visual transition from one screen to another.
 */
export type TransitionConfig = {
  // The basics properties of the animation, such as duration and easing
  transitionSpec?: NavigationTransitionSpec,
  // How to animate position and opacity of the screen
  // based on the value generated by the transitionSpec
  screenInterpolator?: (props: NavigationSceneRendererProps) => Object,
};

示例仅供参考：

  // custom Modal transition animation
  transitionConfig: () => ({
    transitionSpec: {
      duration: 250,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
    },
    screenInterpolator: sceneProps => {
      const { layout, position, scene } = sceneProps
      const { index } = scene

      const height = layout.initHeight
      const translateY = position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [height, 0, 0],
      })

      const opacity = position.interpolate({
        inputRange: [index - 1, index - 0.99, index],
        outputRange: [0, 1, 1],
      })

      return { opacity, transform: [{ translateY }] }
    },
  }),

如何在没有动画的反应导航中将新卡推入堆栈导航器？

how to push a new Card onto a StackNavigator in react-navigation without animation?

react-native

react-navigation