React Native Navigation报错：ScreenContainer未附着于ReactRootView下

项目现有导航结构为：app.js 根节点配置了根 <NavigationContainer>，内部嵌套标签导航，其中home标签页对应Map地图组件。需求是在地图标记弹窗内实现详情、编辑、举报类页面跳转，最初尝试在弹窗内嵌套带independent={true}属性的独立<NavigationContainer>实现模态形式的栈导航，核心代码如下：

<View style={styles.footer} collapsable={false}>
    <NavigationContainer independent={true}>
        <Stack.Navigator
            screenOptions={{
                presentation: "modal",
                headerShown: false,
                gestureEnabled: true,
                cardOverlayEnabled: true,
                ...TransitionPresets.ModalPresentationIOS,
            }}>
            {props.infos.rights && (
                <Stack.Screen name="Modifier" component={Modification} initialParams={props.infos.BarInfos} />
            )}
            <Stack.Screen name="Signaler" component={ReportBar} initialParams={props.infos.BarInfos} />
        </Stack.Navigator>
    </NavigationContainer>
</View>

代码运行后持续抛出导航上下文相关报错，以下为对应问题解答：

ReactRootView 是 React Native 框架层提供的根视图容器类，是整个RN应用挂载到原生端的入口视图：

• 它负责承接JS端渲染的虚拟DOM树，转换为原生平台可识别的原生视图层级，完成JS和原生端的事件通信、视图更新调度
• 常规RN应用默认只会在应用启动时初始化一个ReactRootView实例，所有RN侧的组件（包括导航组件、普通UI组件）都默认挂载在这个根视图的视图树之下
• React Navigation的导航容器默认会向上查找最近的上层导航上下文，如果组件脱离根视图的上下文树、或者嵌套导航容器的挂载节点不符合视图树规则，就会抛出上下文找不到、视图挂载冲突类的报错。

报错核心原因是：地图组件的Marker弹窗属于MapView渲染的原生覆盖层，不属于RN主ReactRootView下的视图树节点，直接在这个原生覆盖层内挂载独立NavigationContainer，会导致导航容器找不到对应的RN根视图上下文，触发挂载错误。
independent={true}属性仅适用于导航容器嵌套在另一个已挂载到主RN视图树的导航容器内部的场景，用来标记当前导航容器不继承上层导航的上下文，本身不具备创建新RN根视图上下文的能力，无法解决原生覆盖层脱离主视图树的问题。
可选择以下方案修复：

• 方案一（推荐）：移除弹窗内的独立NavigationContainer，把模态栈统一放到根导航层级。不需要在弹窗内单独套导航容器，直接把Modifier、Signaler这两个模态页面注册到根NavigationContainer下的栈导航里，地图弹窗内点击按钮时，通过useNavigation钩子获取根导航的navigation实例，直接调用navigate方法跳转到对应模态页即可，完全符合React Navigation的设计规范，不会出现上下文丢失问题。
• 方案二：将弹窗内容转移到RN主视图层级渲染。如果一定要在弹窗侧控制导航逻辑，不要把弹窗内的按钮、导航容器直接写在MapView的Marker.Callout子组件内，可以通过绝对定位的View覆盖在MapView上层，监听Marker的选中事件，控制这个绝对定位的自定义弹窗在主视图树内显示/隐藏，此时在这个弹窗内写独立NavigationContainer就不会出现脱离ReactRootView的问题。
• 方案三（不推荐）：给独立NavigationContainer单独挂载ReactRootView。如果必须在原生Callout内渲染导航，需要手动在原生端给Callout内的RN组件创建新的ReactRootView实例挂载上下文，但是该方案侵入性强、性能开销大，后续维护成本高，非特殊场景不建议使用。

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