React Native Navigation-createBottomTabNavigator和隱藏選項卡欄

Question

我正在使用Expo App，該App與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
  }
})