React Native Screens 中 iOS 新架构下的样式污染问题分析

问题现象

在 React Native Screens 库的使用过程中，开发者在 iOS 平台的新架构(Fabric)下发现了一个奇怪的样式污染问题。当使用 ScreenStack 进行页面导航时，某些视图的边框半径样式会意外地传播到其他不相关的组件上，导致界面显示异常。

问题复现条件

经过多次简化测试，最终确认以下最小复现条件：

1. 使用 ScreenStack 管理两个屏幕（父屏幕和子屏幕）
2. 父屏幕包含一个简单的 Pressable 组件
3. 子屏幕包含两个 View 组件：
   • 一个普通矩形 View
   • 一个带有部分圆角边框的 View（仅设置三个角的圆角）
4. 两个 View 都设置了 overflow: 'hidden' 属性
5. 使用新架构(Fabric)在 iOS 平台上运行

问题表现

当子屏幕显示并自动关闭后，父屏幕中的 Pressable 组件会意外地继承子屏幕中 View 的圆角样式。更奇怪的是，在某些情况下，这种样式污染甚至会影响到系统级别的组件（如警告指示器）。

技术分析

经过深入排查，发现以下几个关键点：

1. overflow: hidden 是关键：移除这个属性可以避免问题出现
2. 圆角设置不完整：当四个角的圆角都设置时，问题不会出现
3. 新架构特有：问题仅在新架构(Fabric)下出现
4. React Native Screens 相关：虽然可能是底层问题，但只有在使用该库时才会显现

解决方案

最新版本的 React Native Screens (4.11.1) 配合 React Native 0.76.8 已经修复了这个问题。开发者可以采取以下措施：

1. 升级到最新版本的 React Native Screens
2. 如果暂时无法升级，可以采取以下临时解决方案：
   • 避免在相关 View 上使用 overflow: hidden
   • 确保圆角设置完整（四个角都设置）
   • 考虑使用其他导航方案替代

技术启示

这个问题揭示了在新架构下样式管理可能存在的潜在问题。开发者在使用部分样式属性（特别是 overflow 和 border radius）时应当格外小心，特别是在涉及屏幕切换的场景中。同时，这也提醒我们及时更新依赖库的重要性，因为许多底层问题可能会在新版本中得到修复。

对于 React Native 生态系统的开发者来说，这类问题的排查也展示了简化复现场景的重要性，只有将问题简化到最小可复现案例，才能更有效地定位和解决问题。