隐藏底部导航中的特定屏幕

Question

我正在使用底部中殿，在底部中殿屏幕中我正在使用堆栈导航，但是当我想在特定堆栈导航屏幕中隐藏底部导航时，我尝试了很多方法，但没有任何效果。

<NavigationContainer independent = { true }>
    <HomeStacks.Navigator initialRouteName="Home" >
      <HomeStacks.Screen name="Home" component={Home} options={{title: ('Welcome'), headerShown: false}} />
      <HomeStacks.Screen name="Details" component={Details} options={{title: ('Details'), headerShown: false}}/>
      <HomeStacks.Screen name="Settings" component={Settings} options={{title: ('Settings'), headerShown: false}}/>
      <HomeStacks.Screen name="Notification" component={Notification} options={{title: ('Notifications'), headerShown: false}}/>
      <HomeStacks.Screen name="NewInspection" component={NewInspection} options={{title: ('NewInspection'), headerShown: false}}/>
      <HomeStacks.Screen name="MoveIn" component={MoveIn} options={{title: ('Move In'), headerShown: false}}/>
      <HomeStacks.Screen name="MoveOut" component={MoveOut} options={{title: ('Move Out'), headerShown: false}}/>
      <HomeStacks.Screen name="Exterior" component={Exterior} options={()=>({title: ('Exterior'), headerShown: false, tabBarStyle: { display: 'none }
        })}/>
    </HomeStacks.Navigator>
  </NavigationContainer>

Answer 1

您可以在屏幕上添加 useEffect 来隐藏底部导航，这对我有用，但不确定性能。

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

例如，如果您想隐藏 NewInspection 屏幕上的底部导航，只需在 NewInspection 上添加此代码即可。