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

debugcn 发表于 Dev

大灰烬

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

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页面，我需要隐藏我的标签栏。我怎样才能做到这一点？

万斯35

您必须将底部标签导航器作为组件传递给堆栈导航器，并默认情况下导出StackNavigation2。

const StackNavigator1 = createStackNavigator();

const StackNavigation1 = () => {
  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 (
    <NavigationContainer>
      <BottomTab.Navigator>
        <BottomTab.Screen name='StackNavigation1' component={StackNavigation1} 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 StackNavigator2 = createStackNavigator();

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。