Реагировать на вкладку tabBarVisible: false не работает для StackNavigator внутри TabNavigator

Question

Я полностью сбит с толку, чтобы добиться чего-то подобного ниже, это работает нормально, но не могу скрыть панель вкладок для EditPage и PageTwo

• Login
• SignUp
• TabNavigator (TabNavigator)
  • FirstTab
  • SecondTab (StackNavigator)
    • ListPage
    • EditPage
  • ThirdTab (StackNavigator)
    • PageOne
    • PageTwo
  • Настройки

Ниже приведена моя конфигурация для него.

import { createStackNavigator, createSwitchNavigator, createBottomTabNavigator } from 'react-navigation';
//Other required imports here

const SignedOut = createStackNavigator({
  Signup: { screen : Signup},
  Login: { screen : Login}
});

const SignedIn = createBottomTabNavigator({
    Dashboard: {
      screen: Dashboard
    },
    Rewards: {
      screen: createStackNavigator({
        Rewards:{
          screen: Rewards,
          navigationOptions:{
            header:null
          }
        },
        AddReward:{
          screen: AddReward,
          navigationOptions:{
            header:null,
            tabBarVisible: false
          }
        }
      })
    },
    Activities: {
      screen: createStackNavigator({
        Rewards:{
          screen: Activities,
          navigationOptions:{
            header:null
          }
        },
        NewActivity:{
          screen: NewActivity,
          navigationOptions:{
            header:null,
            tabBarVisible: false
          }
        }
      })
    },
    Settings: {
      screen: Settings
    }
},{
  tabBarComponent: ({navigation}) => <FooterComponent navigation={navigation} />,
  tabBarPosition: 'bottom',
  animationEnabled: false,
  swipeEnabled: false
});

export const createRootNavigator = (signedIn) => {
    return createSwitchNavigator(
        {
            SignedIn: {
                screen: SignedIn
            },
            SignedOut: {
                screen: SignedOut
            }
        },
        {
            initialRouteName: (signedIn) ? "SignedIn" :"SignedOut",
            headerMode: 'none'
        }
    );
};

Проблемы

• Я не могу скрыть панель вкладок для AddReward и NewActivity
• tabBarVisible: false не работает для StackNavigator внутри TabNavigator

Спасибо

Answer 1

Проблема в том, что ваши экраны (Rewards и AddRewards находятся внутри стекового навигатора)

OLD:

 Rewards: {
          screen: createStackNavigator({
            Rewards:{
              screen: Rewards,
              navigationOptions:{
                header:null
              }
            },
            AddReward:{
              screen: AddReward,
              navigationOptions:{
                header:null,
                tabBarVisible: false
              }
            }
          })
        }

FIX:

    Rewards: {
          screen: createStackNavigator({
            Rewards,
            AddReward,
          }),
          navigationOptions:{
            header:null,
            tabBarVisible: false
          }
        }

Answer 2

Более подробную информацию можно найти в официальном документе. Протестировано для работы с версией 3.0.9:

Навигатор вкладок содержит стек, и вы хотите скрыть панель вкладок на определенных экранах

измененный код с:

const FeedStack = createStackNavigator({
  FeedHome: FeedScreen,
  Details: DetailsScreen,
});

const TabNavigator = createBottomTabNavigator({
  Feed: FeedStack,
  Profile: ProfileScreen,
});

const AppNavigator = createSwitchNavigator({
  Auth: AuthScreen,
  Home: TabNavigator,
});

К:

const FeedStack = createStackNavigator({
  FeedHome: FeedScreen,
  /* any other route you want to render under the tab bar */
});

const TabNavigator = createBottomTabNavigator({
  Feed: FeedStack,
  Profile: ProfileScreen,
});

const HomeStack = createStackNavigator({
  Tabs: TabNavigator,
  Details: DetailsScreen,
  /* any other route you want to render above the tab bar */
});

const AppNavigator = createSwitchNavigator({
  Auth: AuthScreen,
  Home: HomeStack,
});

Кроме того, в этом примереFeedScreen будет иметь два заголовка: один из FeedStack, а другой из HomeStack.Чтобы решить эту проблему, одним из решений является установка высоты заголовка по умолчанию HomeStack равной 0 и переопределение высоты в DetailsScreen.Ниже приведен пример:

const HomeStack = createStackNavigator(
  {
    Tabs: TabNavigator,
    Details: DetailsScreen,
    /* any other route you want to render above the tab bar */
  },
  {
    initialRouteName: 'Tabs',
    defaultNavigationOptions: {
      headerStyle: { height: 0, },
      headerForceInset: { top: 'never', bottom: 'never' },
    },
  },
);

Другое решение:

Стек содержит навигатор с вкладками, и вы хотите установить заголовокв заголовке стека

const TabNavigator = createBottomTabNavigator({
  Feed: FeedStack,
  Profile: ProfileStack,
});

TabNavigator.navigationOptions = {
  // Hide the header from AppNavigator stack
  header: null,
};

Ну, для меня эти решения довольно хитры.Во всяком случае, это работает.

Answer 3

Вы можете использовать один StackNavigator со всеми вашими стеками и установить TabNavigator в качестве маршрута по умолчанию:

• SwitchNavigator
  • Login
  • SignUp
  • StackNavigator
    • TabNavigator
      • FirstTab
      • ListPage
      • Настройки
    • EditPage
    • PageTwo