导航到另一个页面时如何隐藏标签栏

Question

const FriendListStackNav = createStackNavigator({
    FriendList: {
        screen: FriendList,
        navigationOptions: {
            header: null
        }
    },
    Chat: Chat
});

const TabNav = createMaterialTopTabNavigator({
    Home: {
        screen: HomePage,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (
                <Icon name='home' color={tintColor} size={25} />
            )
        }
    },
    FriendList: {
        screen: FriendListStackNav,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (
                <Icon name='inbox' color={tintColor} size={25} />
            )
        }
    }
}, {
    tabBarPosition: 'bottom',
    tabBarOptions: {
        activeTintColor: 'rgb(0, 206, 209)',
        inactiveTintColor: 'rgb(128, 128, 128)',
        showIcon: true,
        showLabel: false,
        style: {
            backgroundColor: 'rgb(255, 255, 255)'
        },
        indicatorStyle: {
            height: 0 
        }
    }
});

export default createStackNavigator({
    SignIn: SignIn,
    Home: {
        screen: TabNav,
        navigationOptions: {
            header: null
        }
    },
    Folowing: Folowing,
    Folowers: Folowers
});

嗨，我在TabNavigator中有StakNavigator，当我转到“聊天”页面时，标签栏如下所示。 如何在聊天页面上隐藏tabBar？
tabNavigator出现后，我一开始就有stackNavigator，然后是另一个stackNavigator。 this is a Homepage, with TabNavigator

when press in icon, i go to chat page

how to hide tabbar in this screen

Answer 1

假设您正在使用React Navigation v3，那么可以尝试一下。

FriendListStackNav.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarVisible,
  };
};