在React-Native中添加WebView时出现模块未找到报错该如何解决？

算力阿峰

2026-10-1

报错解决方案

你的报错核心是react-native-webview依赖react-native-web相关模块，要么是你误启动了web端调试，要么是缺失对应依赖，可按以下步骤排查解决：

若你仅开发安卓/iOS原生端：无需额外安装web相关依赖，直接切换启动目标为安卓/iOS模拟器/真机，不要启动web端调试即可解决报错，react-native-webview本身不支持纯web环境运行。若你使用的React Native版本低于0.60，安装完react-native-webview后需要额外执行react-native link react-native-webview完成原生依赖绑定。
若你需要兼容web端运行：
1. 先安装缺失依赖：
  普通React Native项目执行：npm install react-native-web react-dom
  Expo项目执行：npx expo install react-native-web react-dom
2. 替换适配逻辑，react-native-webview不支持web端，需针对web端用原生iframe替代，参考代码如下：

import { Platform, SafeAreaView, StatusBar, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
})

export default function App() {
  return (
     <SafeAreaView style={styles.container}>
         {Platform.OS === 'web' ? (
           <iframe 
             src="https://google.com" 
             style={{width: '100%', height: '100%', border: 'none'}}
           />
         ) : (
           <WebView source={{uri:'https://google.com'}} />
         )}
         <StatusBar style="auto" />
    </SafeAreaView>
  );
}