React Native WebView 在 Android 新架构下的 JavaScript 注入问题解析

在 React Native 生态系统中，WebView 组件是连接原生 Web 视图和 JavaScript 环境的重要桥梁。本文将深入分析一个在 Android 新架构下出现的 JavaScript 注入执行两次的问题，帮助开发者理解其成因和解决方案。

问题现象

当开发者使用 React Native WebView 的 injectJavaScript 方法时，在 Android 平台且启用新架构（New Architecture）的情况下，注入的 JavaScript 代码会被执行两次。这种异常行为不仅影响性能，还可能导致应用程序逻辑错误。

技术背景

React Native 的新架构引入了 Fabric 渲染器和 TurboModules 系统，旨在提高性能和改善跨平台一致性。在这种架构下，原生模块和视图的管理方式发生了显著变化。

问题根源

通过分析源代码，我们发现问题的根本原因在于命令处理的双重调用机制：

1. 首先，命令通过 RNCWebViewManagerImpl 的 receiveCommand 方法处理
2. 然后，父类 RNCWebViewManager 的 receiveCommand 方法又被调用

这种双重调用模式导致所有通过命令系统发送的操作（包括 injectJavaScript）都被执行了两次。

代码层面分析

在 Android 新架构的实现中，存在以下关键代码片段：

@Override
public void receiveCommand(@NonNull RNCWebViewWrapper reactWebView, String commandId, @Nullable ReadableArray args) {
    mRNCWebViewManagerImpl.receiveCommand(reactWebView, commandId, args);
    super.receiveCommand(reactWebView, commandId, args);
}

这种实现方式导致了命令的重复处理。当 injectJavaScript 被调用时，它会先通过 mRNCWebViewManagerImpl 执行一次，然后又通过父类的 receiveCommand 再次执行。

影响范围

这个问题不仅影响 injectJavaScript 方法，还可能影响其他通过命令系统发送的操作，包括：

• 页面导航（goBack/goForward）
• 页面刷新（reload）
• 停止加载（stopLoading）
• 消息传递（postMessage）
• 缓存清理（clearCache/clearHistory）

解决方案

正确的实现应该避免这种双重调用。修复方案是移除父类的 receiveCommand 调用，只保留实现类的处理逻辑：

@Override
public void receiveCommand(@NonNull RNCWebViewWrapper reactWebView, String commandId, @Nullable ReadableArray args) {
    mRNCWebViewManagerImpl.receiveCommand(reactWebView, commandId, args);
    // 移除 super.receiveCommand 调用
}

开发者应对策略

对于遇到此问题的开发者，可以采取以下措施：

1. 升级到修复此问题的版本（13.12.2及以上）
2. 如果暂时无法升级，可以考虑使用社区维护的分支版本
3. 在代码中添加防护逻辑，防止重复执行带来的副作用

经验教训

这个案例提醒我们：

1. 在新架构迁移过程中，需要特别注意命令处理流程的变化
2. 继承体系中的方法调用需要谨慎处理，避免无意中的重复调用
3. 全面的自动化测试对于捕捉这类问题至关重要

总结

React Native 新架构带来了性能优势，但也引入了新的复杂性。理解底层机制对于解决这类问题至关重要。通过分析这个具体案例，我们不仅解决了实际问题，也加深了对 React Native 新架构下组件交互机制的理解。

对于开发者来说，保持对官方更新和社区解决方案的关注，是应对这类技术挑战的有效方法。