使用react-navigation tabbar tabBarOnPress转到特定路径

Question

预期的功能性

我有一些react-navigation的嵌入路线。

  

StackNavigator-1 - ＆gt; TabNavigator-1 - ＆gt; StackNavigator-2 - ＆gt; TabNavigator的-2

访问StackNavigator-2的唯一方法是点击TabNavigator-1

中的标签

如果我在TabNavigator-2中输入一些标签然后离开并返回，则会让我进入TabNavigator-2

时的最后一个屏幕

由于返回StackNavigator-2的唯一方法是通过TabNavigator-1中的点击，我想劫持该内容并始终重置StackNavigator-2

我的尝试

我查看了navigationOptions对象并找到了函数tabBarOnPress，但这似乎在tabbar级别只有有限的功能。

tabBarOnPress: ({scene, jumpToIndex}) => {  
    jumpToIndex(scene.index);
}

这总是让我回到我以前在标签

中的相同位置

tabBarOnPress: ({scene, jumpToIndex}) => {  
    jumpToIndex(1);
}

这将发送到选项卡组中的另一个选项卡

打印时我可以从场景对象中看到我需要的东西。

里面有一个路由对象，它有一个我需要重置为0的索引。

scene.route

{
  focused:false
  index:1
  route: {
    index:0
    key:"feedback"
    routeName:"feedback"
    routes:[{…}]
  }
}

问题

当react-navigation导航器中有另一个已在该堆栈内激活的选项卡时，如何找到一种简单的方法重定向到堆栈事件的主路径？

Answer 1

对于一个，我希望您已经解决了这个问题，但是作为记录，我想陈述我的解决方案，因为我还没有在网上看到这个。

这个想法是您使用导航对象并使用navigation.popToTop()功能。这是一个示例：

... some existing code here ...

const RootNavigator = createBottomTabNavigator(
    {
        // So here you have a couple of routes defined
        Recipes: MainNavigator,
        Add: AddNavigator,
        Settings: SettingsNavigator,
     },
    {
        initialRouteName: 'Recipes',

        navigationOptions: ({ navigation }) => ({
            // You hook into the tabBarOnPress callback and use the provided parameters as stated in the docs (linked above)
            tabBarOnPress: ({navigation, defaultHandler}) => {
                // When you click on the bottom bar, we always pop to the top, it's a bit more
                // intuitive.
                navigation.popToTop();
                // Call this function to continue transitioning to the screen that was intended.
                defaultHandler();
            },
        }
     }
)

请注意，您还可以使用导航对象提供的其他功能，例如replace（），pop（）...

我的依赖项：

"dependencies": {
    "expo": "^27.0.1",
    "react": "16.3.1",
    "react-native": "~0.55.2",
    "react-native-elements": "^0.19.1",
    "react-navigation": "^2.7.0",
    "react-navigation-redux-helpers": "^2.0.4",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6"
}