目录

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. WebView中添加baseurl属性:`

1
source={{ html:this.props.html,baseUrl:'file:///android_asset/web/'}}
  • file:///android_asset/web/就是我们需要的静态资源地址.
  1. html中使用静态文件,只需直接输入文件名即可,如index.js.因为webview中有设置baseUrl.所以会找到assets中你需要的资源并加载进来.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!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>