javascript - 反应原生材料顶部选项卡在堆栈标题和选项卡之间的空白空间

Question

我正在开发一个应用程序并在我用来@react-navigation/material-top-tabs实现顶部选项卡的主屏幕（第一个屏幕）中。一切正常，但当我第一次启动应用程序时，Tab 和 Header 之间出现了一个奇怪的间隙，请观看此演示以了解问题。我不知道发生了什么，因为当我关闭并重新启动它或在开发时重新加载应用程序时它可以工作。

演示链接：（请观看）https://drive.google.com/file/d/1K2Q5GvogPkRcNun3be3o1W1Bsr3riyTB/view?usp=sharing

图片：

编码：

import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import {useHeaderHeight} from '@react-navigation/elements';

const Tab = createMaterialTopTabNavigator();

const HomeScreen = () => {
  const headerHeight = useHeaderHeight();
  return (
    <>
      <StatusBar backgroundColor="transparent" translucent />
      <Tab.Navigator
        screenOptions={({route}) => {
          return {
            tabBarStyle: {
              backgroundColor: COLORS.primary,
            },
            tabBarIndicatorStyle: {
              backgroundColor: COLORS.white,
            },
          };
        }}
        initialRouteName="Available"
        style={[styles.container, {paddingTop: headerHeight}]}>
        <Tab.Screen
          options={{
            title: ({color, focused}) =>
              !focused ? (
                <Text style={{color: 'grey', fontSize: 16}}>
                  Available Strategies
                </Text>
              ) : (
                <Text style={{color: 'white', fontSize: 16}}>
                  Available Strategies
                </Text>
              ),
          }}
          name="Available"
          component={AvailableStrategies}
        />
        <Tab.Screen
          options={{
            title: ({color, focused}) =>
              !focused ? (
                <Text style={{color: 'grey', fontSize: 16}}>
                  Bought Strategies
                </Text>
              ) : (
                <Text style={{color: 'white', fontSize: 16}}>
                  Bought Strategies
                </Text>
              ),
          }}
          name="Bought"
          component={BoughtStrategies}
        />
      </Tab.Navigator>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: COLORS.primary,
  },
});

有人可以帮我解决顶栏的这个问题吗？先感谢您！