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

问题描述 投票:0回答:1

使用react-navigation-stack 1.10.3,应用'uikit'的headerTransitionPreset,从左到右从头到尾过渡标题标题,同时淡入/淡出headerRight或headerLeft中的任何元素。

对于react-navigation-stack 2.0.15,不推荐使用此过渡,而推荐使用headerStyleInterpolator.forUIKit,但该过渡普遍适用于整个标头,而不仅仅是标题。

如何在2.0.X上在1.10.X上复制以前的行为,可以在headerRight和headerLeft上使用forFade?

[在2.0.15上的示例:enter image description here

[1.10.3上的示例:enter image description here

主要问题是删除堆栈中的淡入淡出动画,并将其替换为从左到右的过渡。

react-native react-navigation expo react-navigation-stack
1个回答
0
投票

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
}
© www.soinside.com 2019 - 2024. All rights reserved.