前言

最近在使用React-Native开发一个App,遇见一个问题,Webview组件根据url来加载页面,但是这样导致的一个问题页面加载的时间有点长,我想优化一下,因为页面只要是一些内容展示,我想将html放在本机上渲染,这样就减少了网络请求带来的延迟。但由于之前并没有学习过Android和Ios的知识,所以在解决这个问题的时候还是花了点时间的,当初用rn也是被他的宣传给唬了,不懂点原生的还是不行滴.希望和我一样的小白能少走点弯路吧！

问题的关键是？

  想要借助`webview`动态的渲染`html`代码,但是我html中需要用到的一些`css`或者`js`我该如何加载呢？全部写在html中?这好像也可以,但是他呀的,这样样式这么多，在加上`js`,这代码是不是太多了？下面我们来看下如何在`RN`中加载静态资源吧！

解决

我这里的只针对`Android`平台,至于`ios`的我还没有研究过.
  1. 第一步先打开android/app/src/main/assets,如果没有assets这个文件夹,那就创建一个吧!

2.在assets中创建一个web文件夹用来放js和css文件

3.在web中创建一个index.js和index.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>

React-Native WebView使用本地js,css渲染html的更多相关文章

  1. React Native WebView关闭缓存

    React Native WebView关闭缓存 网上搜索没有找到关闭React Native下webview控件的缓存的方法,经测试找到解决方案,记录如下 核心思路:通过请求时设置请求头,使页面缓存 ...

  2. 在 React Native 中使用 moment.js 無法載入語系檔案

    moment.js 是很常見的日期時間 library,友善的 API 與極佳的執行效率是它的兩大賣點.例如 (new Date()).getFullYear(),如果使用 moment.js 我可以 ...

  3. React Native Android增加本地图片

    将图片文件 UePbdph.png 放入与index.android.js的同目录中,在index.android.js中引入: <Image source={require('./UePbdp ...

  4. React Native使用AsyncStorage本地持久化

    AsyncStorage AsyncStorage是一个简单的,未加密的,异步的,持久化,关键值存储系统,是全局的.类似于iOS中的NSUserDefault. 存值: import { AppReg ...

  5. react native webview 不能滑动页面

    用RN 写Android的时候,webview点击正常,但是不能滑动,或者滑动很艰难.调试不报错,inspect一切正常. 遍查网络无良方, 最后发现其他同事在最外层套了个这东西: Touchable ...

  6. React Native原生模块向JS传递数据的几种方式(Android)

    一般情况可以分为三种方式: 1. 通过回调函数Callbacks的方式 2. 通过Promises的异步的方式 3. 通过发送事件的事件监听的方式. 参考文档:传送门

  7. 谈谈APP架构选型：React Native还是HBuilder

    原文链接 导读:最近公司的一款新产品APP要进行研发,老大的意思想用H5来做混合APP以达到高效敏捷开发的目的.我自然就开始进行各种技术选型的调研,这里重点想说的是我最后挑选出的2款hybrid ap ...

  8. 如何用 React Native 创建一个iOS APP？

    诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...

  9. 对比React Native、dcloud、LuaView三个框架技术（内部）

    转载自:http://www.jianshu.com/p/ee1cdb33db8d主要对比React Native和5+SDK(就是dcloud的SDK)两个: 开发语言:三个都是用其他语言来统一开发 ...

随机推荐

  1. Docker容器同步主机时间

    方法一: 查看本地是否有/etc/localtime文件 cat /etc/localtime   如果没有就新建文件 cp /usr/share/zoneinfo/Asia/Shanghai /et ...

  2. .NetCore3.1中的WebApi如何配置跨域

    写法 一: 1. 打开Startup.cs,定义静态变量Any,用以配置跨域. private readonly string Any = "Any"; 2. 在Configure ...

  3. Java实现 蓝桥杯VIP 算法训练 判定数字

    算法训练 判定数字 时间限制:1.0s 内存限制:512.0MB 编写函数,判断某个给定字符是否为数字. 样例输入 9 样例输出 yes import java.util.Scanner; publi ...

  4. mysql数据库运维方案

    数据库不仅仅是dba的工作,每一个测试人员也应该懂得基本的数据运维操作,因为数据库是数据承载的地方并且是系统中非常重要的一部分,所以我们也需要熟练的对数据库进行基本维护. 01.常用备份恢复命令 第1 ...

  5. Linux RTC设备驱动

    1. 在Linux2.6.29内核中,RTC是以平台设备的方式注册进内核的. ① RTC驱动定义于文件:drivers/rtc/rtc-s3c.c static struct platform_dri ...

  6. 华为EMUI在service中不能打印debug级别的日志

    华为emui在service里面不能打印debug级别的日志,因为这个小问题调试了一上午,刚开始我还以为emui把系统service的启动流程都改了呢

  7. js实现点击切换checkbox背景图片

    在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景 ...

  8. Docker_01

    目录 1.1 Docker简介 1.1.1 为什么会有Docker的出现? 1.1.2 Docker理念 1.1.3 Docker or 虚拟机? 2.1 Docker安装 3.1 Docker基本使 ...

  9. 多应用下 Swagger 的使用，这可能是最好的方式!

    问题 微服务化的时代,我们整个项目工程下面都会有很多的子系统,对于每个应用都有暴露 Api 接口文档需要,这个时候我们就会想到 Swagger 这个优秀 jar 包.但是我们会遇到这样的问题,假如说我 ...

  10. CentOS Linux release 7.7.1908 (Core)--redis安装

    1.通过filezilla把安装包扔到linux上,建立一个redis 的目录 2.解压 tar -zxvf redis-4.0.6.tar.gz 3. yum安装gcc依赖  yum install ...