React Native WebView 在 iOS 12/13 上的语法兼容性问题解析

问题背景

React Native WebView 组件是 React Native 生态中用于嵌入网页内容的核心组件。在最新版本中，开发者发现了一个与 iOS 12 和 13 系统兼容性相关的问题，主要涉及 JavaScript 新语法在旧版 WebKit 引擎中的支持情况。

问题现象

当应用在 iOS 12 或 13 设备上运行时，WebView 内部使用的 JavaScript 代码会抛出语法错误，导致 postMessage 功能失效。具体表现为控制台报错，无法正常执行 window.ReactNativeWebView.postMessage 方法。

技术分析

问题的根源在于 WebView 实现中使用了 ES2020 引入的逻辑空值赋值运算符（??=）。这个语法在较新的 JavaScript 引擎中支持良好，但在 iOS 12 和 13 系统内置的 WebKit 版本中尚未实现。

原始问题代码使用了如下语法：

window.%@ ??= {};

这在现代浏览器中等价于：

window.%@ = window.%@ || {};

但在旧版 iOS 系统中，引擎无法识别 ??= 运算符，导致整个脚本解析失败。

解决方案

针对此兼容性问题，社区提供了两种解决思路：

1. 条件判断替代方案：

if (window.%@ == undefined) window.%@ = {};

2. 逻辑或运算符方案：

window.%@ = window.%@ || {};

这两种写法都能在旧版 iOS 系统中正常工作，且功能与 ??= 运算符等效。

实现细节

对于 React Native 开发者，需要修改原生代码中的两处脚本注入逻辑：

1. 修改 injectedObjectJson 相关的脚本注入
2. 修改 postMessage 相关的脚本注入

修改后的代码使用传统的条件判断替代了新的语法糖，确保在旧系统上也能正常运行。

注意事项

1. 此修改需要重新编译原生代码，使用 Expo Go 的开发者无法直接应用此修复
2. 建议在支持旧系统时进行全面测试，确保其他功能不受影响
3. 对于长期维护的项目，建议建立兼容性测试矩阵，覆盖不同 iOS 版本

最佳实践

对于需要支持旧版 iOS 的 React Native 项目：

1. 谨慎使用 JavaScript 新特性，特别是那些需要引擎支持的语法糖
2. 考虑使用 Babel 等工具进行代码转换，确保生成的代码具有更好的兼容性
3. 在 WebView 中注入自定义脚本时，尽量使用最基础的 JavaScript 语法
4. 建立完善的版本检测机制，针对不同系统版本提供适当的降级方案

通过这种方式，开发者可以在保证功能完整性的同时，最大限度地扩大应用的兼容范围。