反应本机顶部标签导航栏溢出SafeViewArea

问题描述

我试图在屏幕的SafeViewArea下方显示“顶部标签导航”栏（标签1和Tab2）。但这似乎并没有在我创建的屏幕中尊重SafeViewArea。我还希望“底部标签导航”显示在同一屏幕上。附件中的图像不是我想要的，而是我得到的

我想要的就是这个[image] [1]中的样子。我希望顶部标签栏导航显示在SafeAreaView的正下方。我目前正在使用此代码的代码是将TopTab栏导航扩展到SafeViewArea

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
const Tab = createBottomTabNavigator();
const TopTab = createMaterialTopTabNavigator();
const HomeStack = createStackNavigator();


//Views
function componentA(){
return(
 <View></View>
   );
}

function componentB(){
return(
 <View></View>
   );
}

function componentC(){
return(
 <View></View>
   );
}

function componentD(){
return(
 <View></View>
   );
}

//navigators
function TopStackScreen() {
  return (
    <TopTab.Navigator
      initialRouteName={"Upcoming"}
      options={{ title: "Heads" }}
    >
      <TopTab.Screen name="Past" component={A} />
      <TopTab.Screen name="Upcoming" component={B} />
    </TopTab.Navigator>
  );
}



function HomeStackScreen() {
  return (
    <HomeStack.Navigator headerMode="none">
      <HomeStack.Screen
        name="Home"
        component={C}
        options={{ tabBarLabel: "Home" }}
      ></HomeStack.Screen>
      <HomeStack.Screen
        name="Search"
        component={D}
      ></HomeStack.Screen>
    </HomeStack.Navigator>
  );
}


export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Explore"
          component={HomeStackScreen}
          options={{
            tabBarLabel: "Explore",tabBarIcon: ({ color,size }) => (
              <MaterialCommunityIcons name="search" color={color} size={size} />
            ),}}
        ></Tab.Screen>
        <Tab.Screen
          name="Favorites"
          component={C}
          options={{
            tabBarLabel: "Favorites",size }) => (
              <MaterialCommunityIcons name="heart" color={color} size={size} />
            ),}}
        ></Tab.Screen>
        <Tab.Screen
          name="Appointments"
          component={ TopStackScreen}
          options={{
            tabBarLabel: "Appointments",size }) => (
              <MaterialCommunityIcons
                name="calendar"
                color={color}
                size={size}
              />
            ),}}
        ></Tab.Screen>
      
      </Tab.Navigator>
    </NavigationContainer>
  );
}


[What I get using the code above][2]


  [1]: https://www.google.com/search?q=instagram%20app%20ui&tbm=isch&ved=2ahUKEwimiNC235HrAhWYPt8KHUqkAJYQ2-cCegQIABAA&oq=instagram%20app%20ui&gs_lcp=CgNpbWcQAzICCAA6BAgAEEM6BwgAELEDEEM6BQgAELEDOgYIABAIEB46BAgAEBhQiHJY5IUBYLuIAWgAcAB4AIABR4gBqAeSAQIxNpgBAKABAaoBC2d3cy13aXotaW1nwAEB&sclient=img&ei=R9IxX-ZImP38BsrIgrAJ&bih=733&biw=1440#imgrc=eX1eC9vBz9sybM
  [2]: https://i.stack.imgur.com/3Ygr0.png

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）