在React Native中，有没有一种方法可以将深度嵌套的元素变成全屏元素？

Question

我有一个React Native Expo应用程序，我希望在其中使用以下几种样式来全屏显示元素：

{
    bottom: 0,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0
}

问题是，我要对屏幕结构中深度嵌套的元素执行此操作。作为简化的示例，我当前屏幕的结构如下所示：

<View>
    <View>
        <View>
            <ComponentA>
                <ComponentB>
                    <ComponentC>
                    </ComponentC>
                    <ComponentC>
                    </ComponentC>
                    <ComponentC>
                    </ComponentC>
                </ComponentB>
            </ComponentA>
        </View>
    </View>
</View>

我想做的是在ComponentC中进行设置，以便在该组件中点击一个按钮时，它会使同一组件中的一个元素全屏显示。

尽管显然，在React Native中，默认情况下所有元素都是position: relative。因此，当我将上述样式应用于希望在ComponentC中全屏显示的元素时，它不会显示为全屏显示，而是仅填充该特定ComponentC的全部。 >

有什么办法可以解决这个问题？我当时想考虑要全屏显示的ComponentC部分，然后将其放置在ComponentC外部以及屏幕结构的顶部，但是，它与ComponentC本身完全分开，然后我还必须协调该单独的元素，以便它可以与屏幕上的所有ComponentC一起使用。另外，当我尝试这样做时，在尝试正确维护状态时遇到了很多问题。

也许我一开始只是采取了错误的方法，但是有没有一种方法可以通过一些简单的样式来获得想要的东西，以便使嵌套的元素仍然可以全屏显示，或者我必须设计一些复杂的事情来做我想要的事情，如果是后者，那么关于如何实现这一目标的任何建议？谢谢。

我有一个React Native Expo应用，我希望在其中使用以下基本样式来全屏显示元素：{底部：0，左侧：0，位置：“绝对”，右侧：0，顶部：0 ...

Answer 1

要全屏显示某些内容，无论您处于层次结构中的什么位置，都可以使用Modal组件：https://reactnative.dev/docs/modal。

Answer 2

如果要拆分组件，则可以使用DeviceEventEmitter直接从ComponentC与顶部组件进行通信