React Native Navigation-createBottomTabNavigator和隐藏选项卡栏

Question

我正在使用Expo应用程序，该应用程序与react-native-navigation捆绑在一起。

效果很好，并且我已经设置了多个“堆叠导航”，但是如果没有底部的“标签浏览器”，我似乎无法显示模态。

下面是导航文件夹的结构：

以下是文件：

AppNavigator.js

import { createSwitchNavigator } from 'react-navigation'

import MainTabNavigator from './MainTabNavigator'

export default createSwitchNavigator({
  Main: MainTabNavigator
})

MainTabNavigator.js

import React from 'react'
import { Platform } from 'react-native'
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'

// Import Stacks
import SettingsStack from './stacks/SettingsStack.js'

// Import Components
import TabBarIcon from '../components/TabBarIcon'

// Import Screens
import HomeScreen from '../screens/HomeScreen'
import ExercisesScreen from '../screens/ExercisesScreen'
import ExerciseDetailScreen from '../screens/ExerciseDetailScreen'
import VideoScreen from '../screens/VideoScreen'
import ExerciseStartScreen from '../screens/ExerciseStartScreen'

const HomeStack = createStackNavigator({
  Home: HomeScreen,
  ExerciseDetails: ExerciseDetailScreen
})

const StartWorkOut = createStackNavigator({
  Home: HomeScreen,
  ExerciseStart: ExerciseStartScreen
})

StartWorkOut.navigationOptions = {
  tabBarVisible: false
}

const RootStack = createStackNavigator({
  Main: HomeStack,
  ExerciseStart: ExerciseStartScreen,
  VideoScreen: {
    screen: VideoScreen
  }
},
{
  mode: 'modal',
  headerMode: 'none',
  tabBarVisible: false
})

const ExercisesStack = createStackNavigator({
  Exercises: ExercisesScreen,
  ExerciseDetails: ExerciseDetailScreen
})

const ExerciseRootStack = createStackNavigator({
  Main: ExercisesStack,
  VideoScreen: {
    screen: VideoScreen
  }
},
{
  mode: 'modal',
  headerMode: 'none',
  tabBarVisible: false
})

RootStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  )
}

ExerciseRootStack.navigationOptions = {
  tabBarLabel: 'Exercises',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  )
}

export default createBottomTabNavigator({
  RootStack,
  ExerciseRootStack,
  SettingsStack
})

设置堆栈文件并不重要，我尝试将以下内容添加到屏幕中，但没有任何运气：

  static navigationOptions = {
    tabBarVisible: false
  }

谢谢！

Answer 1

我设法弄清楚了。

我不得不重构代码并从选项卡导航器中删除模式，然后将其直接添加到AppNAvigator.js中，如下所示：

import { createStackNavigator } from 'react-navigation'

import MainTabNavigator from './MainTabNavigator'

// Import Screens
import HomeScreen from '../screens/HomeScreen.js'
import ExerciseStartScreen from '../screens/ExerciseStartScreen.js'
import VideoScreen from '../screens/VideoScreen.js'

export default createStackNavigator({
  Main: MainTabNavigator,
  ExerciseStart: ExerciseStartScreen,
  VideoScreen: VideoScreen
},
{
  mode: 'modal',
  headerMode: 'none',
  navigationOptions: {
    header: null
  }
})