如何使用navigation.navigate导航到新页面,而无需标签栏反应?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (283)

我有一个选项卡中的导航栏和导航栏。我想导航到下一个屏幕。我尝试了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
      }
    }
  }
);
提问于
用户回答回答于

在你的StackNavigator的详细信息屏幕中用以下行代替:

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

或者只是将特定屏幕的设置作为道具来传递 。

所属标签

可能回答问题的人

  • 不吃貓的鱼oo

    5 粉丝466 提问6 回答
  • Richel

    8 粉丝0 提问4 回答
  • 人生的旅途

    10 粉丝484 提问3 回答
  • 云服务小能手

    0 粉丝0 提问2 回答

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励