如何在没有标签栏的情况下使用navigation.navigate导航到新页面答案

【问题标题】：How to navigate to a new page using navigation.navigate without the tab bar in react native如何在没有标签栏的情况下使用navigation.navigate导航到新页面
【发布时间】：2018-05-31 21:56:09
【问题描述】：

我在其中一个选项卡中有一个选项卡导航和导航栏。我想导航到下一个屏幕。我尝试了https://snack.expo.io/@react-navigation/stacks-in-tabs中的教程，并在代码中添加了这一行：

static navigationOptions = ({navigate, navigation}) => ({
        title: "NOTIFICATION HISTORY",
        headerTitleStyle: {
          fontWeight: "bold",
          color: Colors.tintColor,
          alignSelf: "center"
        },
        headerStyle: {
          backgroundColor: "white",
          shadowOpacity: 0,
          shadowOffset: {
            height: 0
          },
          shadowRadius: 0,
          borderBottomWidth: 0,
          elevation: 0
        } 
    });



export const NotiStackNavigator = StackNavigator(
  {
    Noti: {
      screen: NotiScreen
    },
    NotiHistory: {
      screen: NotiHistScreen
    }
  },
  {
    navigationOptions: () => ({
      // gesturesEnabled: false,
      headerTitleStyle: {
        fontWeight: "bold",
        color: Colors.tintColor,
        alignSelf: "left"
      },
      headerStyle: {
        backgroundColor: "white",
        shadowOpacity: 0,
        shadowOffset: {
          height: 0
        },
        shadowRadius: 0,
        borderBottomWidth: 0,
        elevation: 0
      }
    })
  }

    export const MainTabNavigator = TabNavigator(
  {
    Home: {
      screen: HomeStackNavigator
    },
    Noti: {
      screen: NotiStackNavigator
    },
    Settings: {
      screen: SettingsScreen
    }
  },
  {
    navigationOptions: ({ navigation }) => ({
      // Set the tab bar icon
      tabBarIcon: ({ focused }) => {
        const { routeName } = navigation.state;
        let iconName;
        switch (routeName) {
          case "Home":
            iconName = "home";
            break;
          case "Noti":
            iconName = "bell-o";
            break;
          case "Settings":
            iconName = "cog";
        }
        return (
          <FontAwesome
            name={iconName}
            size={24}
            color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
          />
        );
      }
    }),
    // Put tab bar on bottom of screen on both platforms
    tabBarComponent: TabBarBottom,
    tabBarPosition: "bottom",
    // Disable animation so that iOS/Android have same behaviors
    animationEnabled: false,
    swipeEnabled: false,
    // Show the labels
    tabBarOptions: {
      showLabel: true,
      activeTintColor: Colors.tabIconSelected,
      inactiveTintColor: Colors.tabIconDefault,
      style: {
        backgroundColor: Colors.tabBar
      }
    }
  }
);

我可以让标签和导航继续。当导航转到下一个屏幕时，选项卡仍然存在并且选项卡的名称更改为新的屏幕的名称。转到下一个屏幕时如何摆脱标签？

【问题讨论】：

你能发布你的导航吗
添加标签栏和堆栈导航时添加的代码

标签： react-native tabs navigation

【解决方案1】：

在您的 StackNavigator 的详细信息屏幕中替换为以下行：

Details: { screen: DetailsScreen, navigationOptions: { tabBarVisible: false  } },

或在navigationOptions中将其设置为特定屏幕的道具

【讨论】：