如何从React StackNavigator返回到上一个屏幕到特定的Tab

Question

我正在使用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，它有这样的代码但它不会转到screen2而不是tabNavigator的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 }

  });

谢谢

Answer 1

挖了之后我已经找到了方法

React NavigationV2方式：

 navigation.navigate('MainNavigator', {}, NavigationActions.navigate({ routeName: 'Requests' }))

React NavigationV3方式：

navigation.navigate(NavigationActions.navigate({
       routeName: 'MainNavigator',
       action: NavigationActions.navigate({ routeName: 'Requests' })
      }))

BottomNavigator作为MainNavigator Screentwo作为请求

简而言之，navigation.navigate（）有第三个参数，就像第二个导航一样。

所以首先导航到MainNavigator ------然后在TabNavigator中导航----> Screen2

感谢大卫检查这篇文章。希望将来能帮助别人。

How to navigate between different nested stacks in react navigation

Answer 2

我使用react-navigator ..有一个名为jumpToIndex的属性。我解决了这个问题，因为我需要打开一个Modal而不是跳转到给定的Tab。也许你可以修改以满足你的需求：

<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);
        }
      }}
    />

Answer 3

根据您描述导航层次结构的方式，您的根导航器看起来总是Main / BottomNavigator，那么为什么在导航到screentwo之前调用dispatch reset？

似乎问题可能是在您尝试导航到screentwo之前未完成重置操作，因此您最终会使用MainNavigator的initialRoute。

所以只调用qazxsw poi（不重置root）应该做你想要实现的目标。

如果您确实需要重置root，请尝试使用dispatch执行导航到screentwo，以确保按顺序执行操作

navigation.navigate("screentwo")