更改視圖時如何防止反應導航為 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