首页 > 解决方案 > 通过 react-native@iOS 将本地 html 加载到 webview 时无法加载 css 文件

问题描述

我正在使用 react native,我尝试将本地 html 加载到 webview 并使用 iOS 模拟器进行调试,html 文件加载成功,但css 文件js 文件不可用,我使用 safari 调试它,它显示以下消息:

[Warning] Viewport argument value "0;" for key "user-scalable" was truncated to its numeric prefix. Note that ';' is not a separator in viewport values. The list should be comma-separated. (page1.html, line 6)
[Error] Did not parse stylesheet at 'http://localhost:8081/assets/web1/page1.css' because non CSS MIME types are not allowed in strict mode.
[Error] Refused to execute http://localhost:8081/assets/web1/page1.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.

这是我的 rn 代码


  render() {
    const PolicyHTML = require('XXUxLab/web1/page1.html');
    return (
      <View style={styles.container}>
        <WebView
          // source={{uri: this.state.webPageUrl2}}
          source={PolicyHTML}
          style={styles.Web_view}
          originWhitelist={['*']}
          javaScriptEnabled={true}
          useWebKit={true}
        />
      </View>
    );
  }

这就是html ref css文件的方式

    <link rel="stylesheet" type="text/css" href="page1.css">

web1文件夹在react native项目的根目录下,web1文件夹中的page1.html、page1.html和page1.js。

我尝试将网页文件托管到服务器,并在 rn 代码中加载带有 url 的网页,它工作正常。但是为什么它不能在本地工作?我真的很想知道根本原因,我想问题可能是由 Metro 服务配置引起的。

标签: iosreact-nativewebview

解决方案


推荐阅读