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

時間 2019-11-20

標籤 react native webview 使用本地 css 渲染 html 欄目 React 简体版

原文原文鏈接

前言

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

問題的關鍵是？

想要藉助`webview`動態的渲染`html`代碼,可是我html中須要用到的一些`css`或者`js`我該如何加載呢？所有寫在html中?這好像也能夠,可是他呀的,這樣樣式這麼多，在加上`js`,這代碼是否是太多了？下面咱們來看下如何在`RN`中加載靜態資源吧！

解決

我這裏的只針對`Android`平臺,至於`ios`的我尚未研究過.

第一步先打開android/app/src/main/assets,若是沒有assets這個文件夾,那就建立一個吧!

2.在assets中建立一個web文件夾用來放js和css文件html

3.在web中建立一個index.js和index.css用於測試,具體的本身寫吧android

4.修改代碼ios

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

4.2 在html中使用靜態文件，只需直接輸入文件名便可,如index.js.由於webview中有設置baseUrl.因此會找到assets中你須要的資源並加載進來.網絡

<!DOCTYPE html> <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>app