引入多版本react-native-webview npm包出现WebView重复声明报错如何解决

报错原因 #

• 你在当前作用域已经通过顶部import { WebView } from 'react-native-webview-old'声明了名为WebView的变量，后续又使用let WebView重复声明同名变量，直接触发语法报错
• 顶部的两个静态导入属于冗余代码，你已经通过动态require实现按需加载，静态导入不仅没用还会增加包体积

解决方案 #

方案1：直接修改现有代码 #

删掉顶部冗余的两个import语句，仅保留动态加载逻辑即可，示例代码如下：

import { Platform } from 'react-native';

let WebView;
if (Platform.OS === 'android') {
  WebView = require('react-native-webview-latest').WebView;
} else {
  WebView = require('react-native-webview-old').WebView;
}

注意：请确保你已经在package.json中通过别名安装了两个版本的webview包，别名需要和require的包名对应，安装示例：
npm install react-native-webview-old@npm:react-native-webview@11.26.1 react-native-webview-latest@npm:react-native-webview@latest
把上面的11.26.1替换为你需要的iOS端旧版本号即可。

方案2：使用React Native平台特定文件（更推荐） #

React Native原生支持按平台区分文件加载，不需要手动写判断逻辑，维护更方便：

1. 新建两个组件文件：
   • CustomWebView.android.js：安卓端使用的文件，内容如下

   export { WebView as default } from 'react-native-webview-latest';
   

   • CustomWebView.ios.js：iOS端使用的文件，内容如下

   export { WebView as default } from 'react-native-webview-old';
   

2. 业务代码中直接统一导入使用即可，React Native会自动根据平台加载对应文件：

   import WebView from './CustomWebView';
   
   // 后续正常使用WebView组件即可
   

内容的提问来源于stack exchange，提问作者KARTHI N