javascript - 使用react-navigation标签栏tabBarOnPress转到特定路线

预期功能

我有一些使用react-navigation的嵌入式路由。


  StackNavigator-1-> TabNavigator-1-> StackNavigator-2-> TabNavigator-2


访问StackNavigator-2的唯一方法是单击TabNavigator-1中的选项卡

如果我在TabNavigator-2中输入一些标签，然后离开然后再返回，它将使我进入在TabNavigator-2时的上一个屏幕

由于返回StackNavigator-2的唯一方法是单击TabNavigator-1，因此我想劫持它并始终重置StackNavigator-2

我尝试过的

我查看了navigationOptions对象，发现了功能tabBarOnPress，但这似乎在选项卡级别上仅具有有限的功能。

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导航器中的堆栈中已经激活了另一个选项卡时，如何找到重定向到堆栈事件主路径的简单方法？

最佳答案

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

这个想法是您使用导航对象并使用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"
}