在反應導航中，如何防止 AppBar 固定在頂部？ 我希望它在滾動時消失

Question

我正在使用 react-navigation 5.x，當我向下滾動時，我希望我的 AppBar 消失。

這是我的導航的樣子：

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';

export default function createAppContainer(AppNavigator) {
  const { Navigator, Screen } = createDrawerNavigator();
  // eslint-disable-next-line react/prop-types
  return ({ AppBar, DrawerContent, ...rest }) => (
    <Navigator drawerContent={DrawerContent}>
      <Screen
        name="inner-drawer"
        component={(props) => (
          <AppNavigator
            headerMode="screen"
            screenOptions={AppBar ? {
              header: AppBar,
            } : undefined}
            {...props}
          />
        )}
        {...rest}
      />
    </Navigator>
  );
}

在 react-navigation 中，如何防止 AppBar 固定在頂部？

Answer 1

使用Animated.diffClamp()作為文檔說：

這對於滾動事件很有用，例如，在向上滾動時顯示導航欄並在向下滾動時隱藏它。