我如何隐藏底部导航中的选项卡 - React Native
How can i hide a tab in bottom navigation - react native
有人可以告诉我如何隐藏底部导航中显示的选项卡,我想从代码跳转到选项卡但我不希望它显示在底部导航中。下面是我正在使用的一些代码,我只想从底部隐藏 vehicle_edit 选项卡,但我想通过 jumpTo 在我的代码中继续使用它,
请大家指教
//routes
const [routes] = React.useState([
{ key: "dashboard", title: "Dashboard", icon: "home" },
{ key: "notifications", title: "Notifications", icon: "bell" },
{ key: "account", title: "My Account", icon: "account" },
{ key: "vehicle_edit", title: "Vehicles", icon: "car" },
{ key: "appointments", title: "Appointments", icon: "calendar" },
]);
//set bottom tab to first always
useEffect(() => {
setIndex(0);
}, []);
//screens
const renderScene = BottomNavigation.SceneMap({
dashboard: DashboardScreen,
notifications: NotificationsScreen,
account: AccountScreen,
vehicle_edit: VehicleEditScreen,
appointments: AppointmentsScreen,
});
//render
return <BottomNavigation navigationState={{ index, routes }} onIndexChange={setIndex} renderScene={renderScene} />;
react-native-paper
仅用于底部导航屏幕的底部导航组件设计。
您需要 vehicle_edit
的堆栈导航。您可以简单地通过使用 React navigation stack navigator
来实现
非常感谢解决了它..
const Stack = createStackNavigator();
const Account = () => {
return (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Account" component={AccountScreen} />
<Stack.Screen name="VehicleEdit" component={VehicleEditScreen} />
</Stack.Navigator>
);
};
//screens
const renderScene = BottomNavigation.SceneMap({
dashboard: DashboardScreen,
notifications: NotificationsScreen,
account: Account,
appointments: AppointmentsScreen,
});
有人可以告诉我如何隐藏底部导航中显示的选项卡,我想从代码跳转到选项卡但我不希望它显示在底部导航中。下面是我正在使用的一些代码,我只想从底部隐藏 vehicle_edit 选项卡,但我想通过 jumpTo 在我的代码中继续使用它,
请大家指教
//routes
const [routes] = React.useState([
{ key: "dashboard", title: "Dashboard", icon: "home" },
{ key: "notifications", title: "Notifications", icon: "bell" },
{ key: "account", title: "My Account", icon: "account" },
{ key: "vehicle_edit", title: "Vehicles", icon: "car" },
{ key: "appointments", title: "Appointments", icon: "calendar" },
]);
//set bottom tab to first always
useEffect(() => {
setIndex(0);
}, []);
//screens
const renderScene = BottomNavigation.SceneMap({
dashboard: DashboardScreen,
notifications: NotificationsScreen,
account: AccountScreen,
vehicle_edit: VehicleEditScreen,
appointments: AppointmentsScreen,
});
//render
return <BottomNavigation navigationState={{ index, routes }} onIndexChange={setIndex} renderScene={renderScene} />;
react-native-paper
仅用于底部导航屏幕的底部导航组件设计。
您需要 vehicle_edit
的堆栈导航。您可以简单地通过使用 React navigation stack navigator
非常感谢解决了它..
const Stack = createStackNavigator();
const Account = () => {
return (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Account" component={AccountScreen} />
<Stack.Screen name="VehicleEdit" component={VehicleEditScreen} />
</Stack.Navigator>
);
};
//screens
const renderScene = BottomNavigation.SceneMap({
dashboard: DashboardScreen,
notifications: NotificationsScreen,
account: Account,
appointments: AppointmentsScreen,
});