Question

我正在开发一个具有堆栈导航和底部标签导航的应用程序，我需要在第一个堆栈屏幕中显示底部标签栏，但在第二个屏幕中不显示。这是我的导航代码：

const BottomTab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
    <NavigationContainer>
      <BottomTab.Navigator>
        <BottomTab.Screen name='StackNavigation' component={StackNavigation} options={{
          tabBarButton: (props) => <BottomTabStyle label='home' {...props} />,
        }} />
        <BottomTab.Screen name='SecondTab' component={SecondTab} options={{
          tabBarButton: (props) => <BottomTabStyle label='shoppingBag' {...props} />,
        }} />
        <BottomTab.Screen name='Offers' component={Offers} options={{
          tabBarButton: (props) => <BottomTabStyle label='discount' {...props} />,
        }} />
        <BottomTab.Screen name='Profile' component={Profile} options={{
          tabBarButton: (props) => <BottomTabStyle label='profile' {...props} />,
        }} />
      </BottomTab.Navigator>
    </NavigationContainer>
  )
}

这是我的堆栈导航：

const StackNavigator = createStackNavigator();

const StackNavigation = () => {
  return (
    <StackNavigator.Navigator>
      <StackNavigator.Screen name="Home" component={Home} options={{ headerShown: false }} />
      <StackNavigator.Screen name="CardDetails" component={CardDetails} options={{ headerShown: false }} />
      <StackNavigator.Screen name="OfficeDetails" component={OfficeDetails} options={{ headerShown: false }} />
    </StackNavigator.Navigator>
  );
}

此代码有效，但仅适用于第一个堆栈导航和 OfficeDetails 页面，我需要隐藏标签栏。我怎样才能做到这一点？

Answer 1

默认情况下，您必须将 BottomTabNavigator navigator 作为组件传递给 StackNavigationWithTabs 并导出 StackNavigationWithoutTabs。

const StackNavigationWithTabs= createStackNavigator();

const StackNavigationWithTabs= () => {
  return (
    <StackNavigator.Navigator>
      <StackNavigator.Screen name="Home" component={Home} options={{ headerShown: false }} />
      <StackNavigator.Screen name="CardDetails" component={CardDetails} options={{ headerShown: false }} />
   
    </StackNavigator.Navigator>
  );
}

const BottomTab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
      <BottomTab.Navigator>
        <BottomTab.Screen name='StackNavigationWithTabs' component={StackNavigationWithTabs} options={{
          tabBarButton: (props) => <BottomTabStyle label='home' {...props} />,
        }} />
        <BottomTab.Screen name='SecondTab' component={SecondTab} options={{
          tabBarButton: (props) => <BottomTabStyle label='shoppingBag' {...props} />,
        }} />
        <BottomTab.Screen name='Offers' component={Offers} options={{
          tabBarButton: (props) => <BottomTabStyle label='discount' {...props} />,
        }} />
        <BottomTab.Screen name='Profile' component={Profile} options={{
          tabBarButton: (props) => <BottomTabStyle label='profile' {...props} />,
        }} />
      </BottomTab.Navigator>
   
  )
}

const StackNavigator = createStackNavigator();

const StackNavigationWithoutTabs= () => {
  return (
    <NavigationContainer>
      <StackNavigator.Navigator>
        <StackNavigator.Screen name="BottomTabNavigator" component= {BottomTabNavigator} options={{ headerShown: false }} />
        <StackNavigator.Screen name="OfficeDetails" component={OfficeDetails} options={{ headerShown: false }} />
      </StackNavigator.Navigator>
    </NavigationContainer>
  );
}

React 导航 5，在第二个堆栈屏幕上隐藏底部标签栏？

1 个答案: