React Native集成Magic.link时提示WebView未从react-native导出如何解决

步骤1：清理缓存重装依赖 #

RN依赖缓存会导致已安装的子依赖识别失效，先执行以下命令清理旧依赖：

rm -rf node_modules package-lock.json yarn.lock

按照指定顺序重新安装依赖，避免依赖版本错位：

yarn add react-native-webview@8.2.1
yarn add @magic-sdk/react-native@^4.3.0

如果你使用的是RN 0.60+版本，iOS端需要额外执行Pod安装：

cd ios && pod install && cd ..

清理Metro缓存后重启服务：

npx react-native start --reset-cache

步骤2：补丁修复Magic内部导入逻辑 #

如果步骤1执行后仍报错，是旧版本@magic-sdk/react-native内部硬编码了从react-native核心包导入WebView导致的，可通过patch-package修复：

• 安装补丁工具：

yarn add -D patch-package postinstall-postinstall

• 打开node_modules/@magic-sdk/react-native/dist/esm/index.js文件，找到内部导入WebView的代码行，将：

import { WebView } from 'react-native'

修改为：

import WebView from 'react-native-webview'

• 生成永久补丁，后续安装依赖自动生效：

yarn patch-package @magic-sdk/react-native

步骤3：版本适配兜底方案 #

如果你的RN版本≥0.64，8.x版本的react-native-webview存在兼容性问题，可升级到9.2.2版本再重复步骤2的补丁操作：

yarn add react-native-webview@9.2.2

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