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

【问题标题】：How to return back to previous screen from React StackNavigator to specific Tab如何从 React StackNavigator 返回到上一个屏幕到特定选项卡
【发布时间】：2019-04-16 08:20:38
【问题描述】：

我正在使用具有如下结构的 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.js reactjs react-native react-navigation

【解决方案1】：

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

【讨论】：

它是一个嵌套的导航，我使用的是 React NavigationV3，所以这不起作用。我在下面的评论中分享了一些设计图片。我希望你知道一些解决方法谢谢。

【解决方案2】：

从您描述导航层次结构的方式来看，您的根导航器似乎始终是 Main/BottomNavigator，那么为什么在导航到 screentwo 之前调用调度重置？

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

所以只调用navigation.navigate("screentwo")（不重置root）应该可以达到你想要的效果。

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

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

【讨论】：

感谢马丁的回复。我之前确实使用了 navigation.navigate() 的原因，但问题是它确实出现在标签屏幕上，但也从下面删除了底部导航器，它是应用程序中的主导航器
抱歉，我不确定我是否完全理解您的意思。澄清一下，您有一个底部导航器 (createBottomTabNavigator / createMaterialBottomTabNavigator) 带有多个选项卡，其中一个里面有一个顶部栏导航器 (createMaterialTopTabNavigator) 再次带有多个选项卡，其中一个里面有一个堆栈导航员 (createStackNavigator)，对吗？当您单击堆栈导航器内屏幕上的 headerLeft 按钮时，您想在此堆栈内导航，或者导航到顶部或底部选项卡导航器的另一个选项卡中的屏幕？
我认为如果我向您展示它会更容易所以这就是设计ibb.co/PTh09rj。您会看到带有嵌套 TabNav 的 bottomNav 以红色突出显示，这是 stackNav ibb.co/r6cFzns 。因此，当您从服务按钮之一导航到屏幕时会出现问题，然后如果您尝试使用导航向后导航，navigate() 则底部导航将不会显示，因此它仅指向 TabNav，而我需要底部导航始终可见。跨度>
你试过navigation.goBack()而不是navigation.navigate()吗？（没有重置操作）

【解决方案3】：

好的，挖完我找到路了

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

【讨论】：