更改视图时如何防止反应导航动画化AppBar的高度？

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上有动画。

是否有办法在android上禁用所有AppBar动画？

Answer 1

您可以在cardStyleInterpolator中更改screenOptions：

Android的默认值为forRevealFromBottomAndroid，您可以将其更改为其他选项：

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

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