问答

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

作者:admin 2021-06-14 我要评论

render = () = { let source; if (__DEV__) { source = require('./vendor/Editor/index.html'); } else { source = Platform.OS === 'ios' ? require('./vendor...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
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

###

将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} />;
  }
}
###
source={{ html: html, baseUrl: '' }}

或者

source={require("./file.html")}
###

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

###

试试

domStorageEnabled={true}
javaScriptEnabled={true}

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • react-native-webview无法正确加载本地

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

  • webrtc无法收到对方流

    webrtc无法收到对方流

  • sentry接入钉钉消息无法收到报错信息

    sentry接入钉钉消息无法收到报错信息

  • php如何获取一个PHP文件里的内容?

    php如何获取一个PHP文件里的内容?

腾讯云代理商
海外云服务器