React-Native WebView使用本地js,css渲染html
前言
最近在使用
React-Native
开发一个App,遇见一个问题,Webview
组件根据url
来加载页面,但是这样导致的一个问题页面加载的时间有点长,我想优化一下,因为页面只要是一些内容展示,我想将html放在本机上渲染,这样就减少了网络请求带来的延迟。但由于之前并没有学习过Android
和Ios
的知识,所以在解决这个问题的时候还是花了点时间的,当初用rn
也是被他的宣传给唬了,不懂点原生的还是不行滴.希望和我一样的小白能少走点弯路吧!
问题的关键是?
想要借助`webview`动态的渲染`html`代码,但是我html中需要用到的一些`css`或者`js`我该如何加载呢?全部写在html中?这好像也可以,但是他呀的,这样样式这么多,在加上`js`,这代码是不是太多了?下面我们来看下如何在`RN`中加载静态资源吧!
解决
我这里的只针对`Android`平台,至于`ios`的我还没有研究过.
- 第一步先打开
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的更多相关文章
- React Native WebView关闭缓存
React Native WebView关闭缓存 网上搜索没有找到关闭React Native下webview控件的缓存的方法,经测试找到解决方案,记录如下 核心思路:通过请求时设置请求头,使页面缓存 ...
- 在 React Native 中使用 moment.js 無法載入語系檔案
moment.js 是很常見的日期時間 library,友善的 API 與極佳的執行效率是它的兩大賣點.例如 (new Date()).getFullYear(),如果使用 moment.js 我可以 ...
- React Native Android增加本地图片
将图片文件 UePbdph.png 放入与index.android.js的同目录中,在index.android.js中引入: <Image source={require('./UePbdp ...
- React Native使用AsyncStorage本地持久化
AsyncStorage AsyncStorage是一个简单的,未加密的,异步的,持久化,关键值存储系统,是全局的.类似于iOS中的NSUserDefault. 存值: import { AppReg ...
- react native webview 不能滑动页面
用RN 写Android的时候,webview点击正常,但是不能滑动,或者滑动很艰难.调试不报错,inspect一切正常. 遍查网络无良方, 最后发现其他同事在最外层套了个这东西: Touchable ...
- React Native原生模块向JS传递数据的几种方式(Android)
一般情况可以分为三种方式: 1. 通过回调函数Callbacks的方式 2. 通过Promises的异步的方式 3. 通过发送事件的事件监听的方式. 参考文档:传送门
- 谈谈APP架构选型:React Native还是HBuilder
原文链接 导读:最近公司的一款新产品APP要进行研发,老大的意思想用H5来做混合APP以达到高效敏捷开发的目的.我自然就开始进行各种技术选型的调研,这里重点想说的是我最后挑选出的2款hybrid ap ...
- 如何用 React Native 创建一个iOS APP?
诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...
- 对比React Native、dcloud、LuaView三个框架技术(内部)
转载自:http://www.jianshu.com/p/ee1cdb33db8d主要对比React Native和5+SDK(就是dcloud的SDK)两个: 开发语言:三个都是用其他语言来统一开发 ...
随机推荐
- Java实现 LeetCode 813 最大平均值和的分组 (DFS+DP记忆化搜索)
813. 最大平均值和的分组 我们将给定的数组 A 分成 K 个相邻的非空子数组 ,我们的分数由每个子数组内的平均值的总和构成.计算我们所能得到的最大分数是多少. 注意我们必须使用 A 数组中的每一个 ...
- Java实现 蓝桥杯 算法提高VIP 摆花 dp 记忆搜索 2种做法 多重背包
题目描述 小明的花店新开张,为了吸引顾客,他想在花店的门口摆上一排花,共m盆.通过调查顾客的喜好,小明列出了顾客最喜欢的n种花,从1到n标号.为了在门口展出更多种花,规定第i种花不能超过ai盆,摆花时 ...
- java实现整数翻转
** 整数翻转** 以下程序把一个整数翻转(8765变为:5678),请补充缺少的代码. int n = 8765; int m = 0; while(n>0) { m = __________ ...
- java实现第七届蓝桥杯碱基
碱基 题目描述 生物学家正在对n个物种进行研究. 其中第i个物种的DNA序列为s[i],其中的第j个碱基为s[i][j],碱基一定是A.T.G.C之一. 生物学家想找到这些生物中一部分生物的一些共性, ...
- Java实现第八届蓝桥杯字母组串
字母组串 由 A,B,C 这3个字母就可以组成许多串. 比如:"A","AB","ABC","ABA","AA ...
- 调优 | Apache Hudi应用调优指南
通过Spark作业将数据写入Hudi时,Spark应用的调优技巧也适用于此.如果要提高性能或可靠性,请牢记以下几点. 输入并行性:Hudi对输入进行分区默认并发度为1500,以确保每个Spark分区都 ...
- Python快速入门文档
前言 此文本质为本人学习Python过程中的笔记,部分地方叙述表达可能不够清晰,欢迎留言. (本文适合有一定程序语言基础的读者阅读(最好是c语言)) 一.基本语法 1.框架: (1)以缩进表示层次所属 ...
- PHP 安装 XDebug
下载XDebug扩展 下载对应PHP版本的Xdebug 线程安全(TS)和非线程安全(NTS) 安装Xdebug扩展-php.ini [XDebug] xdebug.profiler_output_d ...
- 深入浅出-TCP/IP协议族剖析&&Socket
Posted by 微博@Yangsc_o 原创文章,版权声明:自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0 #简介 该篇文章主要回顾–TCP/I ...
- 「MoreThanJava」Java发展史及起航新世界
「MoreThanJava」 宣扬的是 「学习,不止 CODE」,本系列 Java 基础教程是自己在结合各方面的知识之后,对 Java 基础的一个总回顾,旨在 「帮助新朋友快速高质量的学习」. 当然 ...