reactjs - 在某些屏幕中隐藏底部选项卡

Question

我使用从“react-navigation-tabs”导入的底部标签导航器

import { createBottomTabNavigator } from 'react-navigation-tabs';

const AppNavigator = createBottomTabNavigator({
  Homepage: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  }
} , {
  initialRouteName:"Screen1"
});

屏幕 1 是堆栈导航器

const AppNavigator = createStackNavigator({
    Homepage: {
      screen: Screen1,
    },
    Screen2: {
        screen: Screen2
    }
} , {
    initialRouteName : "Homepage",
    headerMode:"none",
    navigationOptions: ({ navigation }) => ({
        tabBarVisible: navigation.state.routes[navigation.state.index].routeName === 'Screen2' ? false : true
    })
});

经过一些研究，我找到了以下解决方案，但不起作用

navigationOptions: ({ navigation }) => ({
        tabBarVisible: navigation.state.routes[navigation.state.index].routeName === 'Screen2' ? false : true
    })

这是一个坏消息，因为即使将其隐藏在所有屏幕上，下面的代码也不起作用

navigationOptions: ({ navigation }) => ({
        tabBarVisible: false
    })

经过大量研究和尝试数十种解决方案后，标签始终可见

Answer 1

尝试这个：

Screen1.navigationOptions = ({ navigation }) => {

    let tabBarVisible = true;

    let routeName = navigation.state.routes[navigation.state.index].routeName

    if ( routeName == 'ScreenX' ) {
        tabBarVisible = false
    }

    return {
        tabBarVisible,
    }
}