前言

最近在使用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. jchdl - RTL实例 - MOS6502 ALU (Verilog)

    https://mp.weixin.qq.com/s/jLUz757FQZjMEYzYb2AIww   MOS6502是简单,但是曾经相当流行的一款CPU.网上有很多模拟程序可供学习使用.这里使用一个 ...

  2. F5忘记密码修改教程

    !!!首先查看系统版本,13版本和14版本修改密码方式不一致 首先介绍13版本修改密码 注:12版本也适用,11版本未测试,应该也可以,有问题欢迎留言) 1. 将终端连接到BIG-IP串行控制台端口. ...

  3. Java实现 LeetCode 794 有效的井字游戏 （暴力分析）

    794. 有效的井字游戏 用字符串数组作为井字游戏的游戏板 board.当且仅当在井字游戏过程中,玩家有可能将字符放置成游戏板所显示的状态时,才返回 true. 该游戏板是一个 3 x 3 数组,由字 ...

  4. 第七届蓝桥杯JavaA组省赛真题

    解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.煤球数量 煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成三角形), 第 ...

  5. Java实现第十届蓝桥杯等差数列

    试题 I: 等差数列 时间限制: 1.0s 内存限制: 512.0MB 本题总分:25 分 [问题描述] 数学老师给小明出了一道等差数列求和的题目.但是粗心的小明忘记了一 部分的数列,只记得其中 N ...

  6. java实现第七届蓝桥杯骰子游戏

    骰子游戏 PS: 骰子哪有从0开始的只能是1-6,而他i j k的范围都是0-5,所以都要加1 题目描述 我们来玩一个游戏. 同时掷出3个普通骰子(6个面上的数字分别是1~6). 如果其中一个骰子上的 ...

  7. Python中的三种等待时间

    一.强制等待 不论页面是否加载完成,都要等待指定时间才能执行下一步,  单位秒,time.sleep(5) import time time.sleep(10) # 强制等待10秒时间 二.隐式等待( ...

  8. NodeJS及路由

    1.基本介绍- http://nodejs.cn/api/ Node.js 是一个基于Chrome V8 引擎的JavaScript运行环境 Node.js使用了一个事件驱动.非阻塞式I/O的模型,使 ...

  9. Java 8 新特性——检视阅读

    Java 8 新特性--检视阅读 参考 Java 8 新特性--菜鸟 Oracle 公司于 2014 年 3 月 18 日发布 Java 8 ,它支持函数式编程,新的 JavaScript 引擎,新的 ...

  10. Grafana邮箱告警

    1.grafana-server 配置 smtp 服务器 vim /etc/grafana/grafana.ini #修改一下内容 ################################## ...