如何修改react-native-navigation底部标签点击返回初始页面的默认行为？

要实现点击标签页图标时直接回到该标签的初始页面，你可以通过监听标签页的tabPress事件并手动重置导航栈来实现，具体步骤如下：

1. 监听标签页点击事件 #

在调用Navigation.startTabBasedApp配置标签页时，给每个标签页添加navigatorEventListeners，监听tabPress事件。这个事件会在用户点击标签图标时触发，无论该标签是否当前处于活跃状态。

2. 覆盖默认行为并重置导航栈 #

在tabPress的事件处理函数中，首先调用event.preventDefault()阻止默认的标签切换行为（默认会保留该标签原有的导航栈状态），然后使用Navigation.reset方法将该标签的导航栈重置为初始页面。

代码示例 #

Navigation.startTabBasedApp({
  tabs: [
    {
      label: 'Tab 1',
      screen: 'Tab1InitialScreen', // 标签1的初始页面
      navigatorEventListeners: {
        tabPress: ({ event }) => {
          // 阻止默认的标签切换行为
          event.preventDefault();
          // 重置导航栈到初始页面
          Navigation.reset({
            index: 0,
            actions: [
              {
                type: 'Navigation/NAVIGATE',
                routeName: 'Tab1InitialScreen'
              }
            ]
          });
        }
      }
    },
    {
      label: 'Tab 3',
      screen: 'Tab3InitialScreen', // 标签3的初始页面
      navigatorEventListeners: {
        tabPress: ({ event }) => {
          event.preventDefault();
          Navigation.reset({
            index: 0,
            actions: [
              {
                type: 'Navigation/NAVIGATE',
                routeName: 'Tab3InitialScreen'
              }
            ]
          });
        }
      }
    },
    // 其他标签页同理配置
  ]
});

补充说明 #

• 如果你只是想回到当前标签栈的根页面（而不是强制跳转到某个指定页面），也可以使用Navigation.popToRoot方法替代Navigation.reset，代码更简洁：

  Navigation.popToRoot({
    screen: 'Tab1InitialScreen'
  });
  

• 你的React Native Navigation版本1.1.457完全支持上述API，无需担心兼容性问题。

内容的提问来源于stack exchange，提问作者JP Strydom