react-native-navigation全局顶层组件注入实现方案咨询

问题场景 #

需要在应用全局顶部添加一个组件，但当前只能将该组件分别添加到FEED_SCREEN、CHAT_LIST、PROFILE_SCREEN这三个页面中，代码结构如下：

Navigation.setRoot({
  "root": {
    "bottomTabs": {
      "children": [
        {
          "stack": {
            "children": [
              {
                "component": {
                  "name": 'FEED_SCREEN'
                }
              }
            ]
          }
        },
        {
          "stack": {
            "children": [
              {
                "component": {
                  "name": 'CHAT_LIST'
                }
              }
            ]
          }
        },
        {
          "stack": {
            "children": [
              {
                "component": {
                  "name": 'PROFILE_SCREEN'
                }
              }
            ]
          }
        }
      ]
    }
  }
});

希望无需在每个底部Tab子页面重复编写代码，就能实现全局顶部组件的注入。

可行解决方案 #

方案1：使用全局Overlay #

React Native Navigation支持全局Overlay组件，可在应用启动时挂载一个始终显示在顶部的Overlay，无需修改现有页面结构：

1. 先注册你的全局顶部组件：

Navigation.registerComponent('GLOBAL_TOP_BAR', () => GlobalTopBarComponent);

2. 在应用初始化完成后（比如Navigation.setRoot执行后），显示这个Overlay：

Navigation.showOverlay({
  component: {
    name: 'GLOBAL_TOP_BAR',
    options: {
      overlay: {
        interceptTouchOutside: false // 允许点击Overlay下方的页面内容
      }
    }
  }
});

这种方式下，Overlay会始终悬浮在所有页面之上，完全不需要修改现有bottomTabs或页面的代码。

方案2：将bottomTabs嵌套在父Stack中 #

把整个bottomTabs作为子元素放入一个根Stack里，在这个根Stack的首个页面中渲染全局顶部组件，所有Tab页面都会共享这个顶部组件：

修改setRoot的结构如下：

Navigation.setRoot({
  root: {
    stack: {
      children: [
        {
          component: {
            name: 'GLOBAL_WRAPPER_SCREEN', // 自定义的全局包裹页面
            options: {
              topBar: {
                visible: false // 隐藏默认顶部栏，替换为自定义组件
              }
            }
          }
        }
      ]
    }
  }
});

然后在GLOBAL_WRAPPER_SCREEN组件内部，渲染全局顶部组件，再通过Navigation.Component渲染bottomTabs容器：

import { Navigation } from 'react-native-navigation';

const GlobalWrapperScreen = () => {
  return (
    <>
      {/* 你的全局顶部组件 */}
      <GlobalTopBarComponent />
      {/* 渲染底部Tab栏容器 */}
      <Navigation.Component
        name="BOTTOM_TABS_CONTAINER"
        passProps={{}}
      />
    </>
  );
};

// 注册底部Tab栏容器组件
Navigation.registerComponent('BOTTOM_TABS_CONTAINER', () => BottomTabsContainer);

最后在BottomTabsContainer中初始化原有的bottomTabs结构：

const BottomTabsContainer = () => {
  useEffect(() => {
    Navigation.setStackRoot(Navigation.currentComponentId(), {
      bottomTabs: {
        children: [
          // 原有的三个Stack配置
          {
            stack: {
              children: [{ component: { name: 'FEED_SCREEN' } }]
            }
          },
          {
            stack: {
              children: [{ component: { name: 'CHAT_LIST' } }]
            }
          },
          {
            stack: {
              children: [{ component: { name: 'PROFILE_SCREEN' } }]
            }
          }
        ]
      }
    });
  }, []);

  return null; // 内容由React Native Navigation负责渲染
};

这种方式通过父页面包裹整个Tab栏，实现顶部组件的全局复用，避免重复编写。

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