使用react导航选项卡tabBarOnPress到特定的路由

Question

期望函数

我有一些嵌入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);
}

这将向选项卡组中的另一个选项卡发送be。

当我打印的时候，我可以从场景物体中看到我需要的东西。

内部有一个路由对象，它有一个索引，我需要将其重置为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();
            },
        }
     }
)

请注意，您还可以使用导航对象提供的其他功能，例如，替换()、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"
}