如何在 React Native 中更改底部选项卡导航器的高度

Question

我正在尝试更改 React Native 中底部标签导航栏的高度。我已经尝试了这个Stack Overflow question 的一些答案，但似乎没有任何效果。请帮忙。

我的代码：

export default function AppTabs({ logged }) {
  const Tabs = createBottomTabNavigator();

  return (
    <NavigationContainer>
      <SafeAreaView style={{ flex: 1 }}>
        <Tabs.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              const current_color = focused ? COLORS.white : COLORS.lightGrey;

              if (route.name === "Home") {
                return <Foundation name="home" size={28} color={current_color}/>
              } else if (route.name === "Search") {
                return <Ionicons name="search" size={28} color={current_color} />
              } else if (route.name === "Library") {
                return <MaterialCommunityIcons name="bookshelf" size={28} color={current_color} />
              }
            },
            header: () => null,
            tabBarActiveBackgroundColor: COLORS.darkGgrey,
            tabBarInactiveBackgroundColor: COLORS.darkGgrey,
            tabBarActiveTintColor: COLORS.white,
            tabBarInactiveTintColor: COLORS.lightGrey
          })}
        >
          <Tabs.Screen name="Home" component={Home}/>
          <Tabs.Screen name="Search" component={Search}/>
          <Tabs.Screen name="Library" component={Library}/>
        </Tabs.Navigator>
        <PlayerBar track_name="Heart Attack" artist="Dave"/>
      </SafeAreaView>
    </NavigationContainer>
  );
}

Answer 1

可以试试这个

const Tab = createBottomTabNavigator();

export const TabNavigation = () => {
  return (
    <Tab.Navigator
      screenOptions={{
      tabBarStyle: {height: 60},
    }}>
    ...
    </Tab.Navigator>
  );
};