React-Native使用react-native-webview渲染HTML报错求助

问题描述 #

在React Native应用中尝试用react-native-webview渲染HTML片段，之前试过react-native-render-html但CSS支持不佳，现在出现以下报错：

• TypeError: Cannot read property 'isFileUploadSupported' of null
• Error: Requiring module "node_modules/react-native-webview/index.js", which threw an exception: TypeError: Cannot read property 'isFileUploadSupported' of null
• TypeError: Cannot read property 'WebView' of undefined

错误栈 #

ERROR  TypeError: Cannot read property 'isFileUploadSupported' of null, js engine: hermes 
at App (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:93600:36)
at RCTView
at View
at RCTView
at View
at AppContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:85300:36)
at DBC(RootComponent) (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:89907:28)
 ERROR  Error: Requiring module "node_modules/react-native-webview/index.js", which threw an exception: TypeError: Cannot read property 'isFileUploadSupported' of null, js engine: hermes 
at App (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:93600:36)
at RCTView
at View
at RCTView
at View
at AppContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:85300:36)
at DBC(RootComponent) (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:89907:28)
 ERROR  TypeError: Cannot read property 'WebView' of undefined
This error is located at:
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in DBC(RootComponent), js engine: hermes

相关代码 #

import {SafeAreaView, ScrollView, useWindowDimensions} from 'react-native';
import {WebView} from 'react-native-webview';
import {getTemplate} from './template';

export default class App extends Component {
  render() {
    const template = getTemplate();
    const source = {
      html: template,
    };
    return (
      <SafeAreaView>
        <ScrollView>
          <ScrollView horizontal={true}>
            <WebView
              ref={r => (this.webref = r)}
              originWhitelist={['*']}
              source={source}
            />
          </ScrollView>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

解决步骤 #

1. 修复react-native-webview模块安装问题 #

这类报错大多是模块未正确安装或原生链接失败导致的，执行以下操作：

• 卸载现有包：

  npm uninstall react-native-webview
  # 或 yarn remove react-native-webview
  

• 重新安装：

  npm install react-native-webview
  # 或 yarn add react-native-webview
  

• 对于Android项目，进入android目录执行：

  ./gradlew clean
  

• 重新编译运行项目：

  npx react-native run-android
  

2. 修正代码中的基础问题 #

• 代码中class App extends Component但未导入Component，需在顶部添加：

  import React, { Component } from 'react';
  

• 移除未使用的useWindowDimensions导入，减少冗余代码。
• WebView嵌套在两层ScrollView中可能引发布局冲突，若不需要横向滚动可移除外层的横向ScrollView，避免不必要的嵌套。

3. 清除缓存并重启服务 #

• 清除Metro缓存：

  npx react-native start --reset-cache
  

• 关闭当前模拟器/真机上的应用，重新运行项目。

内容的提问来源于stack exchange，提问作者Saurabh D Vyas