React-Native WebView使用本地js,css渲染html


前言

最近在使用React-Native開發一個App,遇見一個問題,Webview組件根據url來加載頁面,但是這樣導致的一個問題頁面加載的時間有點長,我想優化一下,因為頁面只要是一些內容展示,我想將html放在本機上渲染,這樣就減少了網絡請求帶來的延遲。但由於之前並沒有學習過AndroidIos的知識,所以在解決這個問題的時候還是花了點時間的,當初用rn也是被他的宣傳給唬了,不懂點原生的還是不行滴.希望和我一樣的小白能少走點彎路吧!

問題的關鍵是?

  想要借助`webview`動態的渲染`html`代碼,但是我html中需要用到的一些`css`或者`js`我該如何加載呢?全部寫在html中?這好像也可以,但是他呀的,這樣樣式這么多,在加上`js`,這代碼是不是太多了?下面我們來看下如何在`RN`中加載靜態資源吧!

解決

我這里的只針對`Android`平台,至於`ios`的我還沒有研究過.
  1. 第一步先打開android/app/src/main/assets,如果沒有assets這個文件夾,那就創建一個吧!

2.在assets中創建一個web文件夾用來放jscss文件

3.在web中創建一個index.jsindex.css用於測試,具體的自己寫吧

4.修改代碼

4.1 在WebView中添加baseurl屬性:source={{ html:this.props.html,baseUrl:'file:///android_asset/web/'}}重點:file:///android_asset/web/就是我們需要的靜態資源地址.

4.2 在html中使用靜態文件,只需直接輸入文件名即可,如index.js.因為webview中有設置baseUrl.所以會找到assets中你需要的資源並加載進來.

        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>內容展示</title></head>
        <script src="index.js"></script>         
        <body>
        ${htmlString}
        </body>
        <script >
           hljs.initHighlightingOnLoad()
        </script> 
        </html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM