使用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?
主要问题是删除堆栈中的淡入淡出动画,并将其替换为从左到右的过渡。
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
}