我正在使用 React Navigation 版本 5 創建一個 React Native 應用程序，并且我有一個底部選項卡導航器，其中堆棧導航器嵌套在選項卡導航器的每個屏幕中。我只希望底部選項卡欄在每個堆棧導航器的第一頁上顯示。下面是一個零食，顯示我的應用的基本導航功能：https://snack.expo.io/@brforest/hide-tab-1。根據底部選項卡文檔，有一個選項卡Bar可見選項屬性，但是：隱藏選項卡欄可能會導致故障和跳躍行為。我們建議改用堆棧導航器內的選項卡導航器。此處提供了在堆棧導航器中嵌套選項卡導航器的指南。我嘗試使用此方法，但只有當我只有一個堆棧導航器時，我才能使其工作，但我需要為每個選項卡屏幕提供一個堆棧導航器。以下是我（不成功）嘗試在上一個零食中的同一應用程序上使用此方法：https://snack.expo.io/@brforest/hide-tab-2。在這里，我在單個堆棧導航器中嵌套了多個選項卡導航器，以嘗試推斷文檔中建議的方法。正如您在此小吃中看到的那樣，堆棧中的導航不再有效，但選項卡仍然有效。對我來說，將堆棧導航器嵌套在選項卡導航器中（就像我在第一個零食中所做的那樣）比嘗試將同一選項卡導航器嵌套在大型堆棧導航器中更有意義。但是，我想按照文檔進行操作，并找到一種不會導致“故障和跳躍行為”的方法。關于如何實現所需的導航功能的任何建議？謝謝！
3 回答
心有法竹
TA貢獻1866條經驗 獲得超5個贊
通過互聯網后，我找到了自己的方法來隱藏特定堆棧屏幕中的底部選項卡。
export default function SignStack({ navigation, route }) {
useEffect(() => {
if (route.state?.index) {
navigation.setOptions({
tabBarVisible: false,
});
} else {
navigation.setOptions({
tabBarVisible: true,
});
}
}, [navigation, route.state?.index]);
return <Stack.Navigator> ... </Stack.Navigator>
}
這將僅顯示第一個堆棧屏幕上的底部選項卡。
更新 Nov 17 2020
使用隱藏底部選項卡，此示例僅在和屏幕上顯示底部選項卡。getFocusedRouteNameFromRouteAuthSettings
const routeName = getFocusedRouteNameFromRoute(route) ?? 'Auth';
useEffect(() => {
navigation.setOptions({
tabBarVisible: ['Auth', 'Settings'].includes(routeName),
});
}, [navigation, routeName]);
為什么不是第一個解決方案斷續器
上面的解決方案根據渲染隱藏屏幕上的底部選項卡 如果您有并行導航路線，則可以使用上述解決方案。route.state.index
假設您有兩個選項卡導航 用戶堆棧和主頁堆棧，在用戶堆棧上，您有兩個屏幕 配置文件和設置，如果要隱藏設置屏幕上的底部欄，您將使用上述工作正常的解決方案 但是當您直接從主頁導航到用戶設置屏幕時，底部選項卡欄顯示在“設置”屏幕上并隱藏在“配置文件”屏幕上， 發生這種情況是因為“設置”屏幕是 和“配置文件”屏幕是 。route.state.index01
慕后森
TA貢獻1802條經驗 獲得超5個贊
就像你提到的，如果你只希望每個堆棧中的第一個屏幕顯示底部標簽欄，那么我建議你使用第二種方法。創建一個基本堆棧導航器，第一個屏幕是選項卡導航器本身：
const TabScreens = ({navigation}) => { // Tab navigator with only the screens that require bottom tab bar
return (
<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: '#e91e63',
}}>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: 'Home',
}}
/>
<Tab.Screen
name="Welcome"
component={Welcome}
options={{
tabBarLabel: 'Welcome',
}}
/>
</Tab.Navigator>
);
};
創建選項卡導航器后，在主渲染器中使用：
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Stack"
component={TabScreens}
/>
<Stack.Screen // Add any number of extra screens that do not require the bottom tab here
name="Other screen 1"
component={OtherScreen1} />
<Stack.Screen
name="Other screen 2"
component={OtherScreen2} />
</Stack.Navigator>
</NavigationContainer>
這樣，您就不必擺弄底部選項卡組件。您還可以在基本堆棧導航器的一部分和屬于 Tab 導航器的任何屏幕之間來回導航。這里唯一需要注意的是，每次導航時，除了選項卡導航器中的屏幕之外的所有屏幕都將被安裝和卸載。
添加回答
舉報
0/150
提交
取消