Question

我想隐藏产品详细信息页面上的底部标签栏。底部标签栏应该只出现在主页、个人资料和订单屏幕上，而不是出现在产品详细信息页面上，也不应出现在产品图片详细信息屏幕上。

下面是我的代码：

我使用了这个动画标签栏 import { AnimatedTabBarNavigator } from "react-native-animated-nav-tab-bar";

代码如下：

const Tabs = AnimatedTabBarNavigator();


const AppNavigator = () => (

<Tabs.Navigator
tabBarOptions={{
  activeTintColor: colors.white,
  inactiveTintColor: colors.primary,
  activeBackgroundColor : "#3f5393",           
}}
initialRouteName={"Home"}
appearance={{
    tabBarBackground : colors.primary,
    topPadding : 10,
    horizontalPadding : 10,
    dotCornerRadius : 8,
    dotSize : 'small'
}}
>
<Tabs.Screen
  name="My Orders"
  component={MyorderStack}
  options={{
    tabBarIcon: ({ focused, color, size }) => (
        <Image
            source={require('../assets/order.png')}
            style={{
                width : 20,
                height : 20
            }}
            color={ colors.primary}
            
        />
    )
  }}
  
/>    
<Tabs.Screen
  name="Home"
  component={HomeScreenStack}
  options={{
    tabBarIcon: ({ focused, color, size }) => (
        <Image
            source={require('../assets/home.png')}
            style={{
                width : 20,
                height : 20
            }}          
        />
    ),
   headerShown : true 
  }}

/>

<Tabs.Screen
  name="Profile"
  component={ProfileStack}
  options={{
    tabBarIcon: ({ focused, color, size }) => (
        <Image
            source={require('../assets/profile.png')}
            style={{
                width : 20,
                height : 20
            }}
            color={focused ? color : colors.primary}
        />
    )
    
  }}
  appearance ={{
      topPadding : 0
  }}
/>

</Tabs.Navigator>)

这是我的主屏幕代码：（MOBILE 是主主屏幕，MOBILE1 和 MOBILE2 是我不想要底栏的详细信息页面）。

const HomeScreenStack = ({navigation,route}) => (
    <Stack.Navigator>
      <Stack.Screen name="MOBILE" component={ItemScreen} options={{headerTitleAlign: 'center'}} />
      <Stack.Screen name="MOBILE1" component={Appdescription} options={{headerTitleAlign:'center'}} />
      <Stack.Screen name="MOBILE2" component={ItemImageDetails} options={{headerTitleAlign:'center'}} />
    </Stack.Navigator>
)

ItemScreen 是主主屏幕，第一个代码出现在主屏幕上。 Appdescription 是我不想显示底部标签栏的产品的详细信息屏幕。 ItemImageDetails 是产品详细信息的详细信息屏幕，我也不想显示底部标签栏。

这是我用于此底部标签栏的模块的链接： https://www.npmjs.com/package/react-native-animated-nav-tab-bar

Answer 1

请在您导航到产品详细信息的 pageStack 中尝试此操作：

const ProductsStack = createStackNavigator({
  ProductsScreen: ProductsScreen,
  ProductDetail: {
    screen: ProductDetailScreen,
    navigationOptions: ({ navigation }) => ({
      header: null,
      tabBarVisible: true,
      headerMode: "screen",
    }),
  },
  NewProduct: NewProductScreen
});

希望它会起作用。！！！

如何隐藏底部动画标签栏导航器？

1 个答案: