找不到标题高度。您在 Stack 中的屏幕内吗？

Question

我像这样将堆栈导航器嵌套在抽屉内？

const Drawer = createDrawerNavigator();

const renderDrawerItem = (props: DrawerContentComponentProps) => {
  const langCode = translations.getLanguage();
  const DRAWER_LIST = [
    {
      name: RouteNames.Dashboard,
      title: getTranslatedPageTitle(RouteNames.Dashboard, langCode),
      img: HomeIcon,
    },
    {
      name: RouteNames.QueueHistoryStack,
      title: getTranslatedPageTitle(RouteNames.QueueHistory, langCode),
      img: QueueIcon,
    },
    {
      name: RouteNames.InviteFriendsStack,
      title: getTranslatedPageTitle(RouteNames.InviteFriends, langCode),
      img: InviteIcon,
    },
    {
      name: RouteNames.FAQStack,
      title: getTranslatedPageTitle(RouteNames.FAQ, langCode),
      img: FAQIcon,
    },
    {
      name: RouteNames.SettingsStack,
      title: getTranslatedPageTitle(RouteNames.Settings, langCode),
      img: SettingsIcon,
    },
    {
      name: RouteNames.SelectLanguageStack,
      title: getTranslatedPageTitle(RouteNames.SelectLanguage, langCode),
      img: TranslateIcon,
    },
  ];

  return DRAWER_LIST.map((item) => (
    <DrawerItem
      label={item.title}
      icon={({ size }) => (
        <FastImage source={item.img} style={{ width: size, height: size }} />
      )}
      onPress={() => props.navigation.navigate(item.name)}
      key={item.name}
      labelStyle={styles.labelStyle}
    />
  ));
};

const DrawerContent = (props: DrawerContentComponentProps) => {
  const langCode = translations.getLanguage();

  return (
    <View style={styles.maxFlex}>
      <DrawerContentScrollView>
        <View style={styles.greetings}>
          <UserGreeting />
        </View>

        <View>
          {renderDrawerItem(props)}

          <DrawerItem
            label={getTranslatedPageTitle(RouteNames.LogOut, langCode)}
            icon={({ size }) => (
              <FastImage
                source={LogoutIcon}
                style={{ width: size, height: size }}
              />
            )}
            onPress={() => {}}
            labelStyle={styles.labelStyle}
          />
        </View>
      </DrawerContentScrollView>
    </View>
  );
};
const DrawerRoutes = () => (
  <Drawer.Navigator
    initialRouteName={RouteNames.Dashboard}
    drawerContent={(props: DrawerContentComponentProps) => (
      // eslint-disable-next-line react/jsx-props-no-spreading
      <DrawerContent {...props} />
    )}
    hideStatusBar
    statusBarAnimation="fade"
  >
    <Drawer.Screen name={RouteNames.SettingsStack} component={SettingsRoutes} />
    <Drawer.Screen
      name={RouteNames.SelectLanguageStack}
      component={SelectLanguageRoutes}
    />
  </Drawer.Navigator>
);

下面，我添加堆栈导航器：

const SettingsStack = createStackNavigator();
const SettingsRoutes = () => (
  <SettingsStack.Navigator
    screenOptions={{
      headerStyle: headerStyle(useHeaderHeight()),
    }}
  >
    <SettingsStack.Screen name={RouteNames.Settings} component={Settings} />
  </SettingsStack.Navigator>
);

const SelectLanguageStack = createStackNavigator();
const SelectLanguageRoutes = () => (
  <SelectLanguageStack.Navigator
    screenOptions={{
      headerStyle: headerStyle(useHeaderHeight()),
    }}
  >
    <SelectLanguageStack.Screen
      name={RouteNames.SelectLanguage}
      component={SelectLanguage}
    />
  </SelectLanguageStack.Navigator>
);

headerStyle

接受高度并应用一些常见的样式：

export const headerStyle = (headerHeight: number) => ({
  height: Platform.OS === 'ios' ? headerHeight + 20 : headerHeight - 10,
  borderBottomWidth: 1,
  borderBottomColor: DEFAULT_STYLE.$accent1,
});

我收到标题中提到的错误。不知道为什么

useHeaderHeight()

无法计算高度。它破坏了代码。我假设.该函数试图在屏幕加载之前计算高度。谢谢，我期待着。

Answer 1

我也遇到同样的问题。

就我而言，这是因为我在

useHeaderHeight

上下文之外的模态中使用了

@react-navigation/elements

中的钩子

NavigationContainer

。

为了解决我的问题，我替换了我的代码：

import {useHeaderHeight} from '@react-navigation/elements';

function MyComponent() {
  const headerHeight = useHeaderHeight();
  render null;
}

通过此代码：

import {HeaderHeightContext} from '@react-navigation/elements';

function MyComponent() {
  const headerHeight = React.useContext(HeaderHeightContext) ?? 0;
  render null;
}

就您而言，我认为最好的解决方案是将组件包装在

NavigationContainer

中。