Скрыть нижнюю вкладку

Question

У меня есть нижняя панель вкладок, которая находится в app.js.И у меня есть класс, где я хочу скрыть нижнюю панель.На странице home.js у меня есть 2 класса.Первый - основной (список статей), второй - для навигации по кнопкам (в этом классе я отображаю статьи).Как я могу скрыть навигацию по нижней вкладке на второй странице (где отображаются статьи).Я пробовал tabBarVisible: false, но это не работает.Помоги мне, пожалуйста.Код:

// 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);

// home.js

import React from 'react';
import { Font } from 'expo';

import { Button, View, Text, SafeAreaView, ActivityIndicator, ListView, StyleSheet, Image, Dimensions,
ScrollView } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'; // Version can be specified in package.json
import Icon from 'react-native-vector-icons/Ionicons'
import Courses from './Courses'

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };

      const { navigate } = this.props.navigation;
    return (

      <SafeAreaView style={styles.MainContainer}>
      <ScrollView
      >
<ListView
         dataSource={this.state.dataSource}
         renderSeparator={this.ListViewItemSeparator}
         renderRow={rowData => (
           <>
      <Text
               onPress={() => {
                 /* 1. Navigate to the Details route with params */
                 this.props.navigation.navigate("Articles", {
                   otherParam: rowData.article_title,
                 });
               }}
             >
               {rowData.article_title}
             </Text>
              
           </>
         )}
       />
       </ScrollView
       >
</SafeAreaView>
    );
  }
}


class ArticleScreen extends React.Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    const { params } = navigation.state;

    return {
      title: params ? params.otherParam : '',
    };
  };

  render() {
    const { params } = this.props.navigation.state;
    const article_title = params ? params.otherParam : '';


    return (
        <Text>{article_title}</Text>
    );
  }
}


  const RootStack = createStackNavigator(
    {
      Home: {
        screen: HomeScreen,
      },
      Courses: {
        screen: Courses,
        navigationOptions: {
       header: null,
    }
      },
      Articles: {
        screen: ArticleScreen,
      },
    },
    {
      initialRouteName: 'Home',
    }
  );




  const AppContainer = createAppContainer(RootStack);

  export default class App extends React.Component {
    render() {
      return <AppContainer />;
    }
  }



  const AppContainer = createAppContainer(RootStack);

  export default class App extends React.Component {
    render() {
      return <AppContainer />;
    }
  }

Answer 1

Можете ли вы попробовать это?

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

Answer 2

Как насчет этого?Создайте навигатор вкладок и передайте его навигатору стека в качестве одного из экранов. При переходе к статьям будет скрываться панель вкладок ...

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);

Answer 3

Вы должны сделать StackNavigator в качестве основного навигатора и TabBar в качестве вспомогательного навигатора:

const TabBar =  createBottomTabNavigator(RouteConfigs, TabNavigatorConfig);

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

Используя это при переходе ко второму экрану, панель вкладок будет скрыта автоматически.