问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

react-native-webview无法正确加载本地html文件

头像
Asuka109
    216
    新手上路，请多包涵
    render = () => {
    let source;
    if (__DEV__) {
      source = require('./vendor/Editor/index.html');
    } else {
      source =
        Platform.OS === 'ios'
          ? require('./vendor/Editor/index.html')
          : {uri: 'file:///android_asset/vendor/Editor/index.html'};
    }

    return (
      <WebView
        startInLoadingState
        source={source}
        onMessage={this.handleMessage}
        automaticallyAdjustContentInsets={false}
        style={[
          AppStyles.container,
          styles.container,
          {height: this.state.visibleHeight},
        ]}
      />
    );
  };

    最后在安卓端调试却变成了这样，webview里显示的全是html源码

    图片.png

    写了个简单的页面还是不行...

    source = {require('./bar/test.html')}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Title</h1>
    <div>
        <p>Foo</p>
    </div>
</body>
</html>

    图片.png

    react-nativereactandroidhtml5
    阅读 8.7k
    4 个回答
    得票最新
    头像
    1.。
      17
      ✓ 已被采纳

      将HTML页面复制到android/app/src/main/assets文件夹

      
source =
  Platform.OS === 'ios'
    ? require('../Static.bundle/**html')
    : {
        uri: 'file:///android_asset/**html',
      };

export default class webDetail extends Component {
  render() {
    return <WebView originWhitelist={['*']} source={source} />;
  }
}
      头像
      木夕木夕
        1k1620
        source={{ html: html, baseUrl: '' }}

        或者

        source={require("./file.html")}
        头像
        _morelearn
          54512

          老铁，找到解决办法了么？一定要将资源文件放到ios和android的工程目录下么

          头像
          百度不知道
            80111157302

            试试

            domStorageEnabled={true}
javaScriptEnabled={true}
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题