Question

我有一个底部的标签栏，位于app.js中。我在该类中想要隐藏底部的栏。在home.js页面中，我有2个类。第一个是主要内容（是文章列表），第二个是按钮页面导航（在此类中，我显示文章）。如何隐藏第二页（显示文章的地方）的底部标签导航。我试过了tabBarVisible：false，但这不起作用。请帮帮我。代码：

accessible_by(currrent_ability)

// app.js
const TabNavigator = createBottomTabNavigator({
  Home:{
    screen:Home,
    navigationOptions:{
      tabBarLabel:'Главная',
      tabBarIcon:({tintColor})=>(
        <Icon name="ios-home" color={tintColor} size={24} />
      )
    }
  },

  Courses:{
    screen:Courses,
    navigationOptions:{
      tabBarLabel:'Courses',
      tabBarIcon:({tintColor})=>(
        <Icon name="ios-school" color={tintColor} size={24} />
      )
    }
  },
  Editor:{
    screen:Editor,
    navigationOptions:{
      tabBarLabel:'Editor',
      tabBarIcon:({tintColor})=>(
        <Icon name="ios-document" color={tintColor} size={24} />
      )
    }
  },

},{
  tabBarOptions:{
    activeTintColor:'#db0202',
    inactiveTintColor:'grey',
    style:{
      fontSize:3,
      height:45,
      backgroundColor:'white',
      borderTopWidth:0,
      elevation: 5
    }
  }
});



export default createAppContainer(TabNavigator);

Answer 1

您必须将StackNavigator用作主导航器，并将TabBar用作子导航器：

const TabBar =  createBottomTabNavigator(RouteConfigs, TabNavigatorConfig);

const MainNavigator = createStackNavigator(
    {
        TabBar,
        WelcomeScene: { screen:Scenes.WelcomeScene },
        HomeScene: { screen: HomeScene }
   }

进入第二个屏幕时使用此选项卡，选项卡栏将自动隐藏。

Answer 2

你可以试试吗？

class ArticleScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
     title: params ? params.otherParam : '',
     tabBarVisible: false
    };
  };
...

Answer 3

这样的事情怎么样。创建选项卡导航器并将其作为屏幕之一传递到堆栈导航器，当您导航到文章时，它将隐藏选项卡栏...

const TabNavigator = createBottomTabNavigator({
      Home: {
        screen: Home,
        navigationOptions: {
          tabBarLabel: 'Главная',
          tabBarIcon: ({ tintColor }) => (
            <Icon name="ios-home" color={tintColor} size={24} />
          ),
        },
      },

      Courses: {
        screen: Courses,
        navigationOptions: {
          tabBarLabel: 'Courses',
          tabBarIcon: ({ tintColor }) => (
            <Icon name="ios-school" color={tintColor} size={24} />
          ),
        },
      },
      Editor: {
        screen: Editor,
        navigationOptions: {
          tabBarLabel: 'Editor',
          tabBarIcon: ({ tintColor }) => (
            <Icon name="ios-document" color={tintColor} size={24} />
          ),
        },
      },

    }, {
      tabBarOptions: {
        activeTintColor: '#db0202',
        inactiveTintColor: 'grey',
        style: {
          fontSize: 3,
          height: 45,
          backgroundColor: 'white',
          borderTopWidth: 0,
          elevation: 5,
        },
      },
    });


    const stackNavigator = createStackNavigator({
        Home: {
          screen: TabNavigator,
          navigationOptions: {
            header: null,
          },
        },
        Articles: {
            screen: ArticleScreen,
          },
          // add screens here which you want to hide the tab bar
        });

    export default createAppContainer(stackNavigator);

隐藏底部标签导航

3 个答案: