时间戳

首页 > 解决方案 > 如何从 React StackNavigator 返回到上一个屏幕到特定选项卡

node.js - 如何从 React StackNavigator 返回到上一个屏幕到特定选项卡

问题描述

我正在使用具有如下结构的 React StackNavigator：

-----BottomNavigator
-------TabNavigator (has 3 screens)
---------StackNavigator

所以我想从 stackNavigator 返回到上一个屏幕到 TabNavigator（屏幕 2）。

这是我的 TabNavigator 代码：

const ServiceTabNavigator = createMaterialTopTabNavigator(
  {
    screenone: screenone,
    screentwo: screentwo,
    screenthree: screenthree
  },
  {
    tabBarOptions: {
      activeTintColor: "#1B5357",
      inactiveTintColor: "gray",
      style: {
        backgroundColor: "#fff",
        color: "#1B5357"
      },
      indicatorStyle: {
        backgroundColor: "#1e90ff"
      }
    },
    navigationOptions: {
      tabBarLabel: "ESTH",
      tabBarIcon: ({ tintColor }) => (
        <Icon name="bars" color={tintColor} size={24} />
      )
    }
  }
);

这是 StackNavigator 的代码，它有类似这样的代码，但它没有转到 tabNavigator 的 screen2 而不是 screen1。

static navigationOptions = ({ navigation }) => ({
    title: "Request Service",
    headerLeft: (
      <TouchableOpacity
        onPress={() => {
          () =>
            navigation.dispatch(
              NavigationActions.reset({
                index: 0,
                actions: [
                  NavigationActions.navigate({ routeName: "MainNavigator" }) //MainNavigator is bottomNavigator
                ]
              })
            );
          navigation.navigate("screentwo");
        }}
      >
         <Icon
            name="times"
            type="font-awesome"
            iconStyle={{ color: "#000" }}
            containerStyle={{ marginLeft: 16 }}
          />
      </TouchableOpacity>
    ),
    headerTitleStyle: {
      color:'#00CA9D',
      fontWeight: 'bold',
    },
    headerStyle: { borderBottomWidth:0 }

  });

谢谢

标签： node.jsreactjsreact-nativereact-navigation

解决方案

我使用 react-navigator .. 有一个jumpToIndex为此命名的属性。我以这种方式解决了它，因为我需要打开一个模态而不是跳转到给定的选项卡。也许您可以修改以满足您的需求：

<TabBarBottom
      {...props}
      jumpToIndex={(index) => {
        if (index === 5) {
          // This is the MORE-Tab-Button. Don't  switch to tab, but open the Modal
          props.navigation.navigate('Menu_Screen');
        } else {
          jumpToIndex(index);
        }
      }}
    />

推荐阅读