Question

我正在关注React Native中的createBottomTabNavigator文档，以便隐藏底部标签。我必须添加navigationOptions并传递tabBarVisible：false。

不确定我缺少什么：

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import AuthScreen from './screens/AuthScreen'
import WelcomeScreen from './screens/WelcomeScreen'
import MapScreen from './screens/MapScreen'
import DeckScreen from './screens/DeckScreen'
import SettingsScreen from './screens/SettingsScreen'
import ReviewScreen from './screens/ReviewScreen'
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation'

import { Provider } from 'react-redux'
import store from './store'

const TabNavigator = createBottomTabNavigator(
  {
    Welcome: WelcomeScreen,
    Auth: AuthScreen,
    Main: {
      screen: createBottomTabNavigator({
        map: MapScreen,
        deck: DeckScreen,
        review: {
          screen: createStackNavigator({
            review: ReviewScreen,
            settings: SettingsScreen
          })
        }
      })
    }
  }, {
    navigationOptions: {
      tabBarVisible: false,
      lazy: true
    }
  }
)

const AppContainer = createAppContainer(TabNavigator);

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

Answer 1

将tabBarVisible放置在defaultNavigationOptions中，而不是navigationOptions中：

const TabNavigator = createBottomTabNavigator(
  {
    Welcome: WelcomeScreen,
    Auth: AuthScreen,
    Main: {
      screen: createBottomTabNavigator({
        map: MapScreen,
        deck: DeckScreen,
        review: {
          screen: createStackNavigator({
            review: ReviewScreen,
            settings: SettingsScreen
          })
        }
      })
    }
  }, {
    defaultNavigationOptions: {
      tabBarVisible: false
    },
    navigationOptions: {
      lazy: true
    }
  }
)

在React Native中隐藏选项卡（createBottomTabNavigator）

1 个答案: