[ReactNative]Modal弹窗问题

更新时间：2024-12-23 02:24:25

在ReactNative开发中，遇到使用Modal组件创建弹窗的问题时，通常会采用标准的Modal使用方法。

对于单一弹窗需求，这种方法运行顺畅无碍。然而，当涉及多个弹窗需同时显示时，问题便显现于iOS平台。在iOS中，ReactNative仅允许同一时间出现一个Modal组件，若前一个弹窗未关闭，后续的弹窗便无法显现。

问题根源在于，Modal的实现机制由RCTModalHostViewController控制，该控制器通过调用present方法呈现。若在首次present后试图再次present，将无法实现。

理解问题所在后，解决方案便呼之欲出。方法是共享一个Modal，以此解决多个弹窗显示的冲突。共享Modal可确保所有弹窗统一呈现，避免了上述问题。

具体实现上，可以采用Hooks方案简化操作流程，轻松实现多个弹窗的共享Modal。这样的实现既轻量级又易于操作。

网络上亦存在其他开源解决方案，但相比之下，本文提出的方案更具轻便性，且操作更加便捷。