反应本机底部标签栏导航

Question

Hi I am using TabNavigator for showing tabs in bottom, Initially everything was working fine when tabs where only 4 as tabs are increased to 6tabs now they are congested and not looking properly, Can we add one more button on last and show the extra 2 tabs in that popover as like teams app.any help to achive this.

below is my code of TabNavigator:

 <Tab.Navigator
        // initialRouteName='StartupContainer'
        screenOptions={({ route }) => ({
          headerShown: false,
          tabBarHideOnKeyboard: true,
          tabBarStyle: {
            elevation: 0,
            borderTopWidth: 0,
            backgroundColor: "#F1F1F1",
            height: 70,
            paddingBottom: 10,
            fontFamily: "Outfit-Medium",
          },
          tabBarIcon: ({ focused, iconColor, iconName }) => {
            if (route.name === "Dashboard") {
              iconColor = focused ? "#F88022" : "grey";
              iconName = require("../Assets/Images/dashboardIcon.png");
              title = "dddd";
            } else if (route.name === "My Tasks") {
              iconColor = focused ? "#F88022" : "grey";
              iconName = require("../Assets/Images/MyTasks.png");
              title = "dddd";
            } else if (route.name === "Job Openings") {
              iconColor = focused ? "#F88022" : "grey";
              iconName = require("../Assets/Images/JobOpenings.png");
              title = "aaaaa";
            } else if (route.name === "Candidates") {
              iconColor = focused ? "#F88022" : "grey";
              iconName = require("../Assets/Images/Candidates.png");
              title = "5555";
            } else if (route.name === "Users") {
              iconColor = focused ? "#F88022" : "grey";
              iconName = require("../Assets/Images/users.png");
              title = "users";
            } else if (route.name === "Contracts") {
              iconColor = focused ? "#F88022" : "grey";
              iconName = require("../Assets/Images/contracts.png");
              title = "Contracts";
            } else if (route.name === "Assign Tasks") {
              iconColor = focused ? "#F88022" : "grey";
              iconName = require("../Assets/Images/assign_tasks.png");
              title = "AssignTasks";
            } else {
              // iconColor = focused ? '#3a86fe' : 'white'
              // iconName = 'user'
            }
            return <Image style={{ tintColor: iconColor }} source={iconName} />;
          },
          // title:"My Tasks",
          tabBarShowLabel: true,
          tabBarLabelStyle: { color: "#021668" },
        })}
      >
        {userDetails.role_id === 0 ? (
          <>
            <Tab.Screen name="Dashboard" component={DashboardStack} />
            <Tab.Screen name="My Tasks" component={MyTaskStack} options={{unmountOnBlur: true}}/>
            <Tab.Screen name="Job Openings" component={JobOpeningsStack} options={{unmountOnBlur: true}}/>
            <Tab.Screen name="Candidates" component={CandidateStack} options={{unmountOnBlur: true}}/>
          </>
        ) : (
          <>
            <Tab.Screen name="Dashboard" component={AdminDashboardStack} />
            <Tab.Screen name="Assign Tasks" component={AdminTasksStack} />
            <Tab.Screen name="Users" component={AdminUsersStack} />
            <Tab.Screen name="Contracts" component={AdminContractsStack} />
            <Tab.Screen name="Job Openings" component={AdminJobOpeningsStack} />
            <Tab.Screen name="Candidates" component={AdminCandidateStack} options={{unmountOnBlur: true}} />
          </>
        )}
      </Tab.Navigator>

Answer 1

oh... Tab.Screen has tabBarIcon option. for example,

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import HomeScreen from "./tabs/home";
import BoardScreen from "./tabs/board";
import MyPageScreen from "./tabs/my_page";
import colors from "./utils/colors";
import { Image, StyleSheet } from "react-native";
import dp from "./utils/dp";

const Tab = createBottomTabNavigator();

export default function Tabs() {
    const tabs = [
        {
            name: "Home",
            screen: HomeScreen,
            iconPath: require("./icons/home_icon.png"),
            iconOffPath: require("./icons/home_icon_off.png"),
        },
        {
            name: "Board",
            screen: BoardScreen,
            iconPath: require("./icons/board_icon.png"),
            iconOffPath: require("./icons/board_icon_off.png"),
        },
        {
            name: "MyPage",
            screen: MyPageScreen,
            iconPath: require("./icons/mypage_icon.png"),
            iconOffPath: require("./icons/mypage_icon_off.png"),
        },
    ];

    return (
        <Tab.Navigator
            screenOptions={{
                headerShown: false,
                tabBarStyle: {
                    backgroundColor: colors.BackgroundColor(),
                },
            }}
            sceneContainerStyle={{ backgroundColor: colors.BackgroundColor() }}>
            {tabs.map((value, index) => (
                <Tab.Screen
                    key={index}
                    name={value.name + "Screen"}
                    component={value.screen}
                    options={{
                        tabBarShowLabel: false,
                        tabBarIcon: ({ focused }) =>
                            focused ? (
                                <Image source={value.iconPath} style={styles.icon} />
                            ) : (
                                <Image source={value.iconOffPath} style={styles.iconOff} />
                            ),
                    }}
                />
            ))}
        </Tab.Navigator>
    );
}
const styles = StyleSheet.create({
    icon: {
        width: dp(24),
        height: dp(24),
        resizeMode: "contain",
        tintColor: colors.MainColor(),
    },
    iconOff: {
        width: dp(24),
        height: dp(24),
        resizeMode: "contain",
        tintColor: "gray",
    },
});