反應本機底部標簽欄導航

Question

您好，我正在使用 TabNavigator 在底部顯示選項卡，最初一切正常，當只有 4 個選項卡增加到 6 個選項卡時一切正常，現在它們很擁擠並且看起來不正確，我們能否在最后添加一個按鈕並顯示額外的 2 個選項卡在該彈出窗口中，就像團隊應用程序一樣。任何有助於實現這一目標的幫助。

下面是我的 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

哦... Tab.Screen 有 tabBarIcon 選項。 例如，

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