如何在本機反應中隱藏特定屏幕上的底部導航欄？

Question

我正在使用 React Native 和 React Native Navigation 來構建我的應用程序。 目前，我有三個底部標簽：主頁、上傳視頻和消息。 選擇“上傳視頻”選項卡后，我想渲染“上傳視頻”組件並僅在該屏幕上隱藏底部選項卡，並顯示帶有“取消”（將它們帶回 HomeView）和“發布”按鈕的標題（這有已經完成）。 我很難在這個特定屏幕上隱藏標簽欄。

我嘗試按照此處的代碼（ 如何在特定屏幕上隱藏底部標簽欄（react-navigation 3.x） ）； 但是，這最終沒有成功，我無法以這種方式隱藏任何屏幕上的底部選項卡。

目前，我將此作為我的底部導航器：

const BottomTabNavigator = createBottomTabNavigator({
    HomeView: {
        screen: HomeView,
    },
    VideoView: {
        screen: VideoSelectionView
    },
    Messages: {
        screen: SearchView
    }
});

任何見解都會非常有幫助，謝謝。

Answer 1

您需要為每個需要隱藏標簽欄的TabBar屏幕或堆棧指定，

const BottomTabNavigator = createBottomTabNavigator({
    HomeView: {
        screen: HomeView,
        navigationOptions:()=>{
          return {
            tabBarVisible:false,
          };
       }
    },
    VideoView: {
        screen: VideoSelectionView
    },
    Messages: {
        screen: SearchView
    }
});

Answer 2

我以前所未有的方式遍歷互聯網以找到解決此問題的方法，因為文檔提供的解決方案根本不起作用。

我有以下導航設置：

• 底部標簽
  • A (NativeStack)
    • 1（屏幕）
    • 2（畫面）
    • 3（畫面）
  • B (NativeStack)
  • C (NativeStack)

我想隱藏屏幕 1 中的底部欄。最后的訣竅是相應屏幕中的以下代碼段：

useEffect(() => {
  navigation.getParent()?.setOptions({ tabBarStyle: { display: "none" });
  return () => navigation.getParent()?.setOptions({ tabBarStyle: undefined });
}, [navigation]);

該效果在導航道具更新時運行，並且在屏幕打開后隱式運行。 使用getParent()我得到底部選項卡導航器，並且可以使用setOptions(...)設置選項。 要使底部選項卡返回，必須手動設置選項。 我通過返回在useEffect()調用中重置 tabBarStyle 的方法解決了這個問題。 這個調用是在清理的時候進行的，這意味着它會在屏幕被卸載后立即運行。

願這能拯救你們同樣的我不得不經歷的絕望。

Answer 3

在 v5 上，您可以使用函數和默認 arg 導航修改選項。：

<BottomTab.Screen
      name="Explore"
      component={Explore}
      options={({ navigation }) => {
        const { routes, index } = navigation.dangerouslyGetState();
        const { state: exploreState } = routes[index];
        let tabBarVisible = true;
        if (exploreState) {
          const { routes: exploreRoutes, index: exploreIndex } = exploreState;
          const exploreActiveRoute = exploreRoutes[exploreIndex];
          if (exploreActiveRoute.name === "RewardDetail") tabBarVisible = false;
        }
        return {
          tabBarVisible,
          title: "Explore",
          tabBarLabel: "Explore",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="search1" color={color} size={size} />
          ),
        };
      }}
    />

看我的回答： https ://stackoverflow.com/a/64042879/5288560

Answer 4

在 React Navigation V6 中，在 tabBarStyle 下的選項中添加display: none 。 添加tabBarButton: () => null,禁用 Tab 中的圖標。

<Stack.Screen
    name="Add Product"
    component={AddProduct}
    options={() => ({
      tabBarStyle: {
        display: "none",
      },
      tabBarButton: () => null,
    })}
  />

Answer 5

由於現在正在使用 react-navigation 5，因此上述解決方案不再適用。

對於 React-Navigation 5，請參閱此鏈接。

Answer 6

只需在要隱藏欄的屏幕上，設置tabBarVisible: false 。

<Tab.Screen
    name="SignIn"
    component={SignInScreen}
    options={{
      tabBarVisible: false, //like this
      tabBarButton: (props) => null, //this is additional if you want to hide the tab element from the bottom nav
    }}
  />

Answer 7

在 React navigation 5+ 中，我使用以下方法在特定屏幕上隱藏標簽欄，該屏幕位於標簽屏幕的堆棧導航器內。 在包含文件的選項卡導航器中，我創建了一個函數，然后使用將動態觸發的函數設置選項屬性。

function getIsTabBarShown(route) {
    const routeName = getFocusedRouteNameFromRoute(route) ?? routes.DASHBOARD;

    switch (routeName) {
        case routes.MEMBERDETAILS:
            return false;
        default:
            return true;
    }
}

當用戶轉到 MemberNavigator Stack 中的 MemberDetails 頁面時，此函數將返回 false。

<Tab.Screen 
    name="MemberTab"
    component={MemberNavigator}
    options={({ route }) => ({
        title: 'Members',
        tabBarVisible: getIsTabBarShown(route),
        tabBarIcon: ({ color, size }) =>
        <MaterialCommunityIcons name="account-group" color={color} 
   size={size} />
})} />

這是官方文檔以了解更多信息，請單擊此處。

Answer 8

單擊此處參考文檔

Answer 9

只是將 tabBarStyle 設置為 none 對我不起作用，我也需要使用屬性 tabBarVisible ，如果使用鈎子你可以這樣做：

export function useHideBottomBar() {
    const navigation = useNavigation();

    useEffect(() => {
        navigation.getParent()?.setOptions({ tabBarStyle: { display: 'none' }, tabBarVisible: false });
        return () =>
            navigation.getParent()?.setOptions({ tabBarStyle: undefined, tabBarVisible: undefined });
    }, [navigation]);
}

Answer 10

在搜索並嘗試了很多方法后，我將頂部元素 View 更改為 Modal 然后隱藏 bottombar，因為 modal 可以是上底欄。 這不是最好的，但仍然有用。

<View>
  //code block
</View> 

to->
         
<Modal animationType='fade' transparent={false} visible={true}>
   /code block
</Modal>

Answer 11

在第 6 版中，這對我有用：

要從屏幕中隱藏底部選項卡導航器：

navigation.getParent()?.setOptions({tabBarStyle: {display: 'none'}});

要從屏幕顯示底部選項卡導航器：

navigation.getParent()?.setOptions({tabBarStyle: {display: 'flex'}});