React Native - Webview 加载本地文件

  • Z时代
  • 2024-01-10
  • 分类：综合

react

为什么80%的码农都做不了架构师？>>>

网上没找到合适的方法。用 react-native-fs 解决了一下，因为release之后静态文件地址发生改变，之前的引入就无效了

1.项目根目录引入静态文件的文件夹

2.创建一个html，刚才引入的地址${RNFS.MainBundlePath}/web

/**
 * ./EditorHtml
 */
let RNFS = require('react-native-fs');
const htmlWeb = `
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <script type="text/javascript" src="${RNFS.MainBundlePath}/web/lib/zepto.min.js"></script>
            <script type="text/javascript" src="${RNFS.MainBundlePath}/web/lib/snap.svg-min.js"></script>
            <script type="text/javascript" src="${RNFS.MainBundlePath}/web/lib/interact.min.js"></script>
            <script type="text/javascript" src="${RNFS.MainBundlePath}/web/lib/pablo.js"></script>
            <script type="text/javascript" src="${RNFS.MainBundlePath}/web/lib/browser.umd.js"></script>
            <link rel="stylesheet" href="${RNFS.MainBundlePath}/web/css/main.css">
            <link rel="stylesheet" href="${RNFS.MainBundlePath}/web/css/font.css">
        </head>
        <body>
            <div id="rightPanel">
                <div class="page currentPage">
                </div>
                <textarea id="texteventtarget" style="display: none; "></textarea>
                <div class="initView" style="display: none; "></div>
            </div>
        </body>
        <script type="text/javascript" src="${RNFS.MainBundlePath}/web/js/initHtml.js?v=1"></script>
        <script type="text/javascript" src="${RNFS.MainBundlePath}/web/js/text.js"></script>
    </html>
`;
export default htmlWeb;

3.引入这个html${RNFS.MainBundlePath}/web

import WEBHTML from './EditorHtml';

4.注意baseUrl

<WebView
    scrollEnabled={false}
    ref={webview => this.webview = webview}
    onMessage={this.invoke.listener}
    javaScriptEnabled={true}
    automaticallyAdjustContentInsets = {false}
    scalesPageToFit={true}
    contentInset={{left : 0,right:0,top:0,bottom:0}}
    source={{html:WEBHTML,baseUrl: '/web'}}
/>

转载于:https://my.oschina.net/xmqywx/blog/1580842

以上是 React Native - Webview 加载本地文件 的全部内容， 来源链接： utcz.com/z/383615.html

回到顶部