我试图在屏幕的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",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="heart" color={color} size={size} />
),
}}
></Tab.Screen>
<Tab.Screen
name="Appointments"
component={ TopStackScreen}
options={{
tabBarLabel: "Appointments",
tabBarIcon: ({ color, 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