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的，但是它不会转到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 }

  });

谢谢

Answer 1

确定后，我找到了方法

反应NavigationV2方式：

CompanySpecification companySpecification = new CompanySpecification(searchParameter);

反应NavigationV3方式：

    startPos=transform.position;    // to be replaced with camera position
    var hitpoint1=targetA.position; // to be replaced with raycasts hit1
    var hitpoint2=targetB.position; // to be replaced with reaycast hit2
    Ray rayB=new Ray(startPos,hitpoint2-startPos);
    float dist=(hitpoint1-startPos).magnitude;
    var purpleEndPoint=rayB.GetPoint(dist);

    Debug.Log("purple line length ="+(hitpoint1-purpleEndPoint).magnitude);

BottomNavigator作为MainNavigator
Screentwo作为请求

简而言之，navigate（）具有第三个参数，其作用类似于第二个导航。

因此它首先导航到MainNavigator ------然后----> TabNavigator中的Screen2

感谢David检查此信息。希望将来能对其他人有所帮助。

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。

因此仅调用navigation.navigate("screentwo")（无需重置root）就可以实现您想要的目标。

如果您确实需要重置根目录，请尝试也使用分派来执行到screentwo的导航，以确保按顺序执行操作

const navigateAction = NavigationActions.navigate({
   routeName: route,
   params: params
})
navigation.dispatch(navigateAction)

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

3 个答案: