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