如何防止在更改视图时对应用栏的高度进行反应导航动画处理?

Question

我看到Android AppBar在更改页面时height动画。

这是我AppBar.js：

import React from 'react';
import { Appbar as AppBarDefault } from 'react-native-paper';
import Logo from '../Logo';
const {
Header,
BackAction,
Content,
Action,
} = AppBarDefault;
export default class AppBar extends React.Component {
render() {
const { nav, pages, previous } = this.props;
return (
<Header statusBarHeight={Constants.statusBarHeight}>
{previous ? (
<BackAction onPress={() => nav.goBack()} />
) : (
<Action
icon="menu"
onPress={nav.openDrawer}
/>
)}
<Content
title={<Logo />}
style={{ alignItems: 'center' }}
/>
<Action icon="account-supervisor-circle" onPress={() => nav.navigate(pages.list)} />
</Header>
);
}
}

这是默认行为吗，我可以防止这种情况吗？

我也尝试使用：

<Stack.Navigator {...getStackConfig(routes)} screenOptions={screenOptions}>
{routes.map((route) => (
<Stack.Screen
key={route.path}
name={route.page}
component={route.component}
options={{
title: route.message,
headerStyleInterpolator: HeaderStyleInterpolators.forFade,
headerStyle: {
height: Constants.statusBarHeight + REACT_PAPER_APPBAR_HEIGHT
},
...TransitionPresets.SlideFromRightIOS,
}}
/>
))}
</Stack.Navigator>

这个从右边启用幻灯片(ios样式(，我希望它可以解决AppBar动画，但我仍然有两个AppBar的动画，而我不希望在AppBar上播放动画。

有没有办法禁用安卓上的所有应用栏动画？

Answer 1

您可以在screenOptions中更改cardStyleInterpolator：

安卓的默认值是forRevealFromBottomAndroid您可以将其更改为其他选项：

<Stack.Navigator screenOptions={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS // what ever you want 
}}>
...
</Stack.Navigator>

更多选项： https://reactnavigation.org/docs/stack-navigator/#cardstyleinterpolators