我已经实现了显示/隐藏底部标签栏的组件。根据滚动方向参数showTabBar设置。

export default class ScrollTab extends React.Component {
  onScroll = (event) => {
    const { navigation } = this.props;
    const currentOffset = event.nativeEvent.contentOffset.y;
    const dif = currentOffset - (this.offset || 0);  

    if (dif < 0) {
      navigation.setParams({ showTabBar: true });
    } else {
      navigation.setParams({ showTabBar: false });
    }
    //console.log('dif=',dif);

    this.offset = currentOffset;
  }      

  render () {
    return (
      <ScrollView onScroll={(e) => this.onScroll(e)}>
        {this.props.children}
      </ScrollView>
    );
  }
}

然后在navigationOptions中，可以根据showTabBar参数更改tabBarVisible属性。

const isTabBarVisible = (navState) => {
  if (!navState) {
    return true;
  }
  let tabBarVisible = navState.routes[navState.index].params ? navState.routes[navState.index].params.showTabBar : true;
  return tabBarVisible;
}

const MessagesStack = createStackNavigator(
  {
    Messages: MessagesScreen,
  },
  config
);

MessagesStack.navigationOptions = ({ navigation }) => {
  return {
    tabBarLabel: 'Messages',
    tabBarVisible: isTabBarVisible(navigation.state)
  }
};

编辑：请参阅Github本期文章以获得答案。
旧答案：基于Scroll View的滚动事件，你可以将tabBarVisible导航选项设置为false。如果你想要一个动画平滑，你可以考虑调整tabBar的高度或将tabBar移到屏幕外。我还没有测试过这些，但这将是我首先考虑的事情。

I have implemented a custom ScrollView component that can be wrap inside any child component to achieve hide and show bottom functionality in react-navigation version 6+

<ScrollView
          
            onScroll={scroll}
            scrollEventThrottle={16}
            refreshControl={refreshControl ? refreshControl : undefined}
            {...props}>
            {children}
        </ScrollView>

And the scroll function will be something like this.

 const navigation = useNavigation()
    const parent = navigation.getParent();

    const onScroll = (event: any) => {
        const currentOffset = event.nativeEvent.contentOffset.y;
        const dif = currentOffset - currentPos;
        if (currentOffset == 0) {
            parent?.setOptions({ tabBarStyle: { display: 'flex', animated: true } });
        }
        if (Math.abs(dif) < 3) {
        } else if (dif < 0) {
            parent?.setOptions({ tabBarStyle: { display: 'flex', animated: true } });
        } else {
            parent?.setOptions({ tabBarStyle: { display: 'none', animated: true } });
        }
        currentPos = currentOffset;
    };