React Native中带有React Navigation 5的问题-HeaderShown:false不会隐藏标题

问题描述 投票:0回答:1

因此,我在React native中一直处于混乱状态,并且注意到expo init命令现在引入了一个更新的基本代码库。我遇到的问题与在导航器组件的选项中使用hederShown道具时标头未隐藏有关。

import * as React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import TabBarIcon from "../components/TabBarIcon";
import HomeScreen from "../screens/HomeScreen";
import LinksScreen from "../screens/LinksScreen";

const BottomTab = createBottomTabNavigator();
const INITIAL_ROUTE_NAME = "Home";

export default function BottomTabNavigator({ navigation, route }) {
  // navigation.setOptions({
  //   headerShown: false
  // });

  return (
    <BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
      <BottomTab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerShown: false,
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} name="md-code-working" />
          )
        }}
      />
      <BottomTab.Screen
        name="Links"
        component={LinksScreen}
        options={{
          headerShown: false,
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} name="md-book" />
          )
        }}
      />
    </BottomTab.Navigator>
  );
}

上面的代码是我尝试应用显示的标头的不同方法,我也尝试过通过在每个页面组件中为导航选项创建静态方法来创建静态方法的旧方法,这些方法似乎都不起作用,而令人讨厌的是文档建议将其应用于导航器是在此版本的react-navigation中使用它的方法。

主页组件看起来像这样

export default function HomeScreen() {
  return <View style={styles.container}></View>;
}

HomeScreen.navigationOptions = {
  headerShown: false
};

并且“链接”页面看起来几乎完全相同,但不包括渲染功能。

任何帮助将不胜感激。克里斯。

reactjs react-native react-navigation expo react-native-navigation
1个回答
0
投票

因此事实证明,新的基本代码创建了一个堆栈导航器,该堆栈导航器使用底部的标签导航器引用屏幕,并将底部显示的标题应用于该堆栈导航器,而禁用页面上的标题

<Stack.Navigator screenOptions={{ headerShown: false }}>
© www.soinside.com 2019 - 2024. All rights reserved.