在 React Native 中基于屏幕隐藏材质底部导航

Question

我在 React Native 项目中使用 createMaterialBottomTabNavigator，并尝试确保底部标签导航仅在项目详细信息屏幕和内部级别屏幕中可见。

如果我将 barStyle={{display:"none"}} 添加到 Tab.Navigator 那么它将不会在所有屏幕上可见。我还尝试使用 useContext 变量来获取要传递的动态值。发生的事情是首先执行 Tab Navigator，然后执行组件代码，因此无法从 useContext 获取更新的值。任何建议表示赞赏

import React, {useContext, useState, useEffect } from "react";
import { FontAwesome5, MaterialCommunityIcons } from "@expo/vector-icons";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import { createStackNavigator } from "@react-navigation/stack";

import ProjectsList from "./../src/screens/dashboard/ProjectsList";
import ProjectDetails from "./../src/screens/dashboard/ProjectDetails";
import MileStones from "./../src/screens/dashboard/MileStones";
import Financial from "./../src/screens/dashboard/Financial";
import Specification from "./../src/screens/dashboard/Specification";
import ClientDesigns from "./../src/screens/dashboard/Designs";
import Tasks from "./../src/screens/dashboard/Tasks";

const Tabs = createMaterialBottomTabNavigator();
const Contractor = createStackNavigator();


const ContractorStackScreen = () => {
    return (
        <Contractor.Navigator
          screenOptions={{
            headerShown: false,
          }}
        >
           <Contractor.Screen name="ProjectsList" component={ProjectsList} />
           <Contractor.Screen name="ProjectDetails" component={ProjectDetails} />
           <Contractor.Screen name="MileStones" component={MileStones} />
           <Contractor.Screen name="Tasks" component={Tasks} />
        </Contractor.Navigator>
    );
}

const ContractorTabsScreen1 = () => {
    return(
        <Tabs.Navigator
                
                // barStyle={{
                //   display: token ? "flex" : "none"
                // }}
                tabBarOptions={{
                    labelStyle: {
                        textAlign: "center",
                        fontSize: 16,
                    },
                    tabBarVisible : false
                }}
            >
                <Tabs.Screen
                name="Home"
                component={ContractorStackScreen}
                options={{
                    tabBarLabel: "Home",
                    tabBarColor: "#d3d3d3",
                    tabBarIcon: ({ focused, color, size }) => (
                        <MaterialCommunityIcons name="home" size={28} color="#000" />
                    )
                }}

                />
                <Tabs.Screen
                name="Financial"
                component={Financial}
                options={{
                    tabBarLabel: "Financial",
                    tabBarColor: "#d3d3d3",
                    tabBarIcon: ({ focused, color, size }) => (
                        <FontAwesome5 name="hand-holding-usd" size={28} color="#000" />
                    ),
                }}
                />
                <Tabs.Screen
                name="Design"
                component={ClientDesigns}
                options={{
                    tabBarLabel: "Design",
                    tabBarColor: "#d3d3d3",
                    tabBarIcon: ({ focused, color, size }) => (
                        <MaterialCommunityIcons name="palette" size={28} color="#000" />
                    ),
                }}
                />
                <Tabs.Screen
                name="Specifications"
                component={Specification}
                options={{
                    tabBarLabel: "Specifications",
                    tabBarColor: "#d3d3d3",
                    tabBarIcon: ({ focused, color, size }) => (
                        <FontAwesome5 name="tasks" size={28} color="#000" />
                    ),
                }}
                />
        </Tabs.Navigator>
    )
}

export default ContractorTabsScreen1;