該AppNavigator組件基本上只是底部選項卡，指向多個嵌套的堆疊導航器。
AppNavigator.js：
const Tab = createMaterialBottomTabNavigator();
export const AppNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Search" component={SearchStack} />
<Tab.Screen name="Host" component={HostStack} />
<Tab.Screen name="More" component={MoreStack} />
</Tab.Navigator>
);
};
例如，這是我的HostStack.js：
const Stack = createStackNavigator();
export const HostNavigator = ({ navigation }) => {
return (
<Stack.Navigator>
<Stack.Screen name="First" component={FirstScreen} />
<Stack.Screen name="Second" component={SecondScreen} />
</Stack.Navigator>
);
};
并且MoreStack.js：
const Stack = createStackNavigator();
export const MoreStack = ({ navigation }) => {
return (
<Stack.Navigator>
<Stack.Screen name="Third" component={ThirdScreen} />
<Stack.Screen name="Fourth" component={FourthScreen} />
</Stack.Navigator>
);
};
我想在 和 中隱藏底部標簽導航SecondScreen，而它在初始螢屏和FourthScreen中仍應可見。我應該如何做到這一點？我嘗試參考https://reactnavigation.org/docs/hiding-tabbar-in-screens/它確實有效，但前提是我有一個嵌套堆疊，而不是我想要的三個。對于其他 stackoverflow 問題也是如此，我一直無法找到包含多個堆疊的解決方案。FirstScreenThirdScreen
我正在使用 React Navigation 6。
非常感謝任何幫助！
uj5u.com熱心網友回復：
- 在您的應用程式的頂層創建一個包含兩個螢屏的堆疊：您的選項卡導航器和一個新堆疊（即 NoTabBar 或其他東西）。
- 從你現在擁有的堆疊中取出你想要隱藏標簽欄的所有螢屏，并將它們移動到那個新堆疊中。
- 從選項卡堆疊內導航到這些螢屏。
偽代碼如下：
// TabNavigator.jsx - for this you could just rename your AppNavigator to TabNavigator
// NoTabBarStack.jsx
const Stack = createStackNavigator();
export const NoTabBarStack = ({ navigation }) => {
return (
<Stack.Navigator>
<Stack.Screen name="Second" component={SecondScreen} />
<Stack.Screen name="Fourth" component={FourthScreen} />
</Stack.Navigator>
);
};
// AppNavigator.jsx
const Stack = createStackNavigator();
export const AppNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Tabs" component={TabNavigator} />
<Stack.Screen name="NoTabBar" component={NoTabBarStack} />
</Stack.Navigator>
);
};
然后，當您在 FirstScreen 上時，呼叫navigate('NoTabBar', {screen: Second})并且標簽欄將被隱藏。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/485327.html
上一篇：ReactNative：條件視圖
下一篇：TypeError：props.navigation.getParam不是函式。（在'props.navigation.getParam('docId')'中，