前言

最近在使用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. Java实现 蓝桥杯 算法训练 My Bad（暴力）

    试题 算法训练 My Bad 问题描述 一个逻辑电路将其输入通过不同的门映射到输出,在电路中没有回路.输入和输出是一个逻辑值的有序集合,逻辑值被表示为1和0.我们所考虑的电路由与门(and gate, ...

  2. Java实现 LeetCode 605 种花问题（边界问题）

    605. 种花问题 假设你有一个很长的花坛,一部分地块种植了花,另一部分却没有.可是,花卉不能种植在相邻的地块上,它们会争夺水源,两者都会死去. 给定一个花坛(表示为一个数组包含0和1,其中0表示没种 ...

  3. Java实现 LeetCode 211 添加与搜索单词 - 数据结构设计

    211. 添加与搜索单词 - 数据结构设计 设计一个支持以下两种操作的数据结构: void addWord(word) bool search(word) search(word) 可以搜索文字或正则 ...

  4. java实现第五届蓝桥杯供水设施

    供水设施 X星球的居民点很多.Pear决定修建一个浩大的水利工程,以解决他管辖的N个居民点的供水问题.现在一共有N个水塔,同时也有N个居民点,居民点在北侧从1号到N号自西向东排成一排:水塔在南侧也从1 ...

  5. java实现第五届蓝桥杯排列序数

    排列序数 如果用a b c d这4个字母组成一个串,有4!=24种,如果把它们排个序,每个串都对应一个序号: abcd 0 abdc 1 acbd 2 acdb 3 adbc 4 adcb 5 bac ...

  6. java实现第四届蓝桥杯错误票据

    错误票据 题目描述 某涉密单位下发了某种票据,并要在年终全部收回. 每张票据有唯一的ID号.全年所有票据的ID号是连续的,但ID的开始数码是随机选定的. 因为工作人员疏忽,在录入ID号的时候发生了一处 ...

  7. java实现第六届蓝桥杯熊怪吃核桃

    熊怪吃核桃 题目描述 森林里有一只熊怪,很爱吃核桃.不过它有个习惯,每次都把找到的核桃分成相等的两份,吃掉一份,留一份.如果不能等分,熊怪就会扔掉一个核桃再分.第二天再继续这个过程,直到最后剩一个核桃 ...

  8. SpringSecurity(2)---记住我功能实现

    SpringSecurity(2)---记住我功能实现 上一篇博客实现了认证+授权的基本功能,这里在这个基础上,添加一个 记住我的功能. 上一篇博客地址:SpringSecurity(1)---认证+ ...

  9. 视频处理之OSD

    欲观原文,请君移步 OSD简介 OSD,on-screen display的简称,即屏幕菜单式调节方式.一般我们按一下Menu键后屏幕弹出的显示器各项调节项目信息的矩形菜单,比如调亮度,色调,饱和度等 ...

  10. tensorflow2.0学习笔记第一章第五节

    1.5简单神经网络实现过程全览