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

对孩子隐藏createBottomTabNavigator

2 个答案: