如何在反应导航中应用独立的 HeaderStyleInterpolators？

Question

使用 react-navigation-stack 1.10.3，应用 'uikit' 的 headerTransitionPreset 将标题标题从左到右转换，同时淡入/淡出 headerRight 或 headerLeft 中的任何元素。

在 react-navigation-stack 2.0.15 中，不推荐使用此转换，而支持使用 headerStyleInterpolator.forUIKit，但该转换普遍适用于整个标题，而不仅仅是标题。

如何在 1.10.X 和 2.0.X 上复制以前的行为，我可以在 headerRight 和 headerLeft 上使用 forFade？​​p>

2.0.15 上的示例：

1.10.3 上的示例：

主要问题是在返回堆栈时删除淡入淡出动画，并用从左到右的过渡替换它。

Answer 1

forUIKit 样式模仿原生 iOS 行为。如果您不想要相同的行为，您可以改用自定义样式插值器。

如果您想保留与 forUIKit 相同的插值器，但想要淡化左右按钮而不是默认转换，您可以使用以下内容覆盖这些样式：

function forCustomHeaderAnimation(options) {
  const { progress } = options.current;
  const styles = HeaderStyleInterpolators.forUIKit(options);

  return {
    ...styles,
    leftButtonStyle: { opacity: progress },
    leftLabelStyle: {},
    rightButtonStyle: { opacity: progress },
  };
}

// ...

static navigationOptions = {
  headerStyleInterpolator: forCustomHeaderAnimation
}

来源：https://github.com/react-navigation/navigation-ex/blob/2243b45cc1addf83727166d82736d214f181b1fb/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx