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,
};

示例FYI：

  // 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 }] }
    },
  }),

如何在没有动画的反应导航中将新卡推送到StackNavigator上？

1 个答案: