对子项隐藏 createBottomTabNavigator

Question

我正在使用 Expo 构建一个应用程序，我希望在用户第一次打开该应用程序时有一个欢迎屏幕。一旦“欢迎”和“身份验证”屏幕导航到“地图”屏幕，我需要隐藏它们的标签栏。

使用来自 react-navigation 的更新后的 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

您可以使用传递给MapScreen 的函数将tabBarVisible 设置为false，如下所示：

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

Answer 2

对于任何感兴趣的人，我找到了另一个解决方案：

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