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

【问题标题】：how to push a new Card onto a StackNavigator in react-navigation without animation?如何在没有动画的反应导航中将新卡片推入堆栈导航器？
【发布时间】：2017-05-25 21:37:44
【问题描述】：

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

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

【问题讨论】：

标签： react-native react-navigation

【解决方案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 }] }
    },
  }),

【讨论】：