Скрыть createBottomTabNavigator от детей

Question

Я создаю приложение с помощью Expo, и мне нужен экран приветствия, когда пользователь впервые открывает приложение.Мне нужна панель вкладок для экранов «приветствия» и «авторизации», когда они пройдут мимо них на экран «карты».

С обновленным createBottomTabNavigator из реагирующей навигации я не могуиметь нижнюю вкладку, видимую как false для вложенных дочерних элементов.

Вот мой файл App.js:

import Expo from 'expo';
import React from 'react';
import { Text, View } from 'react-native';
import { 
  createStackNavigator, 
  createBottomTabNavigator, 
  createAppContainer 
} from 'react-navigation';
import { Provider} from 'react-redux';

import store from './store';
import AuthScreen from './screens/AuthScreen';
import WelcomeScreen from './screens/WelcomeScreen';
import MapScreen from './screens/MapScreen';
import DeckScreen from './screens/DeckScreen';
import ReviewScreen from './screens/ReviewScreen';
import SettingsScreen from './screens/SettingsScreen';

export default class App extends React.Component {
  render() {
    const MainNavigator = createAppContainer( 
      createBottomTabNavigator({
        welcome: {
          screen: WelcomeScreen,
          navigationOptions: { tabBarVisible: false }
        },
        auth: {
          screen: AuthScreen,
          navigationOptions: { tabBarVisible: false }
        },
        main: createBottomTabNavigator({
          map: MapScreen,
          deck: DeckScreen,
          review: createStackNavigator({
            review: ReviewScreen,
            settings: SettingsScreen
          })
        })
      })
    );

    return (
      <Provider store={store}>
        <MainNavigator />
      </Provider>
    );
  }
}

Answer 1

Для всех, кто заинтересовался, я нашел другое решение:

 const MainNavigator = createAppContainer( 
      createBottomTabNavigator({
        welcome: {
          screen: WelcomeScreen,
          navigationOptions: { tabBarVisible: false }
        },
        auth: {
          screen: AuthScreen,
          navigationOptions: { tabBarVisible: false }
        },
        // Add navigationOptions to this screen
        main: {
          navigationOptions: { tabBarVisible: false },
          screen: createBottomTabNavigator({
            map: MapScreen,
            deck: DeckScreen,
            review: createStackNavigator({
              review: ReviewScreen,
              settings: SettingsScreen
            })
          })
        }
      })
    );

Answer 2

Вы можете установить tabBarVisible в false, используя функцию, которая передается в MapScreen следующим образом:

   constructor(props) {
      this.state = {
         isTabBarVisible: true,
      }
      this.hideTabBar = this.hideTabBar.bind(this);
   }

   hideTabBar() {
      this.setState({ isTabBarVisible: false })
   }

   ...
   render() {
   ...
      navigationOptions: { tabBarVisible: this.state.isTabBarVisible }
      main: createBottomTabNavigator({
         map: <MapScreen hideTabBar={this.hideTabBar}/>,
         deck: DeckScreen,
         review: createStackNavigator({
           review: ReviewScreen,
           settings: SettingsScreen
         })
       })
   }

Затем, в вашем MapScreen вы можете вызвать:

componentDidMount() {
    this.props.hideTabBar();
}