【问题标题】:How can i hide a tab in bottom navigation - react native我如何在底部导航中隐藏标签 - 反应原生
【发布时间】:2021-12-12 09:56:53
【问题描述】:

有人可以告诉我如何隐藏底部导航中显示的选项卡,我想从代码跳转到选项卡,但我不希望它显示在底部导航中。下面是我正在使用的一些代码,我只想从底部隐藏 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} />;

【问题讨论】:

    标签: reactjs react-native react-native-paper


    【解决方案1】:

    react-native-paperBottom Navigation 组件设计仅适用于底部导航屏幕。

    您需要 vehicle_edit 的堆栈导航。您可以通过使用React navigation stack navigator 来实现此目的

    【讨论】:

    • 太棒了。很高兴你弄清楚了。您能否向有问题的未来开发人员确认这个答案?谢谢。
    • 是的,如果您也可以回答这个问题,请在下面发布,请@BYIRINGIRO Emmanuel stackoverflow.com/questions/70323936/…
    【解决方案2】:

    非常感谢您解决了它..

    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, 
      });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-05-02
      • 1970-01-01
      • 2021-09-28
      • 2021-10-17
      • 2019-03-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多