前言

最近在使用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. Shell脚本 （二） 变量与运算符

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 四.Shell 中的变量 1.系统变量 1.1 常用系统变量 $HOME. $PWD. $SHELL . ...

  2. Linux (四) 基础命令 下

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.查看文件内容 1.命令  cat 对应单词:concatenate 作用:查看文件内容 常用参数: ...

  3. Java实现 LeetCode 722 删除注释（暴力筛选）

    722. 删除注释 给一个 C++ 程序,删除程序中的注释.这个程序source是一个数组,其中source[i]表示第i行源码. 这表示每行源码由\n分隔. 在 C++ 中有两种注释风格,行内注释和 ...

  4. ASP.Net Web中Repeater怎么删除指定行

    使用OnItemCommand事件 首先附上相关的代码 <asp:Repeater ID="Repeater1" runat="server" OnIte ...

  5. Java实现 LeetCode 576 出界的路径数（DFS || DP）

    576. 出界的路径数 给定一个 m × n 的网格和一个球.球的起始坐标为 (i,j) ,你可以将球移到相邻的单元格内,或者往上.下.左.右四个方向上移动使球穿过网格边界.但是,你最多可以移动 N ...

  6. Java实现 LeetCode 189 旋转数组

    189. 旋转数组 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: [1,2,3,4,5,6,7] 和 k = 3 输出: [5,6,7,1,2,3,4] ...

  7. Java实现第九届蓝桥杯第几天

    第几天 题目描述 2000年的1月1日,是那一年的第1天. 那么,2000年的5月4日,是那一年的第几天? 注意:需要提交的是一个整数,不要填写任何多余内容. import java.util.Cal ...

  8. java实现第七届蓝桥杯凑算式

    凑算式 凑算式 B DEF A + - + ------- = 10 C GHI (如果显示有问题,可以参见[图1.jpg]) 这个算式中AI代表19的数字,不同的字母代表不同的数字. 比如: 6+8 ...

  9. Linux链接命令及软链接、硬链接详解

    命令ln详解 命令ln,所在路径为: 可以看到,它的路径为:/usr/bin/ln,因此,它的执行权限是所有用户 命令的基本功能是创建链接文件(硬链接),例如:ln /etc/issue /tmp 选 ...

  10. CoordinatorLayout简介

    CoordinatorLayout简介 CoordinatorLayout的作用 协调子view的布局,降低子view之间的耦合度 CoordinatorLayout的使用 核心:Behavior,用 ...