react-native-webview 本地化加载Html

最新推荐文章于 2024-04-23 14:25:26 发布
VIP文章 最新推荐文章于 2024-04-23 14:25:26 发布
阅读量1.5k 收藏
点赞数 1
分类专栏： react-native 文章标签： webview react.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014613941/article/details/120223231
版权

有些Html 引用了js一些跨域的问题，本文章为了解决在RN端加载一个本地H5的方案，该方案解决js跨域问题

1、创建一个bundle文件，将html的资源全部放进去如图：

 

2、然后将bundle文件拖到RN主工程中

3、在iOS端 将bundle文件拖入xcode项目的目录中，注意不要选copy 如图：

4、在安卓中

Android：

打开android/app/build.gradle文件，在android方法里添加如下代码<

最低0.47元/天 解锁文章
蔡小晴
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
RN 加载到html
p_find的博客
09-20 925
import React, { Component } from “react”; import { TouchableOpacity } from “react-native”; import { getData } from “./Fecth”; import RefreshListView, { RefreshState } from “react-native-refresh-lis...
react-native-autoheight-webview：React Native的自动高度Webview
02-05
react-native-autoheight-webview React Native的自动高度webview，甚至内联html的自动宽度。 版本控制 npm install react-native-autoheight-webview --save （rn> = 0.60，rnw> = 10.9.0） npm install react-native-autoheight-webview@1.0.1 --save （0.57 <= rn <0.59） npm install react-native-autoheight-webview@1.5.2 --save （0.59 <=
rn webview加载本地静态html,IOS开发入门之ReactNative Webview加载本地html异常问题
weixin_35472986的博客
06-08 602
本文将带你了解IOS开发入门ReactNative Webview加载本地html异常问题，希望本文对大家学IOS有所帮助。ReactNative Webview加载本地html异常问题，本文主要解决ios发布release版本时，react native webview加载本地html显示异常问题。产生此问题得条件：ios加载本地的html，且html内部包含引用外部的js链接(注：链接...
ReactNative WebView加载本地HTML
吴佩佩佩佩的博客
06-29 1526
将html文件，放入Android/data\com.xxxxxx/files目录下 实现代码 <WebView originWhitelist={'*'} // 必填 如果为true，则将允许通过file://URI 访问文件系统。默认值为false。 allowFileAccess={true} source={{ uri: 'file:///storage/emulated/0/Android/data/com.xxxxxx/files/web/index.html', }} /&
ReactNative 中WebView显示本地HTML及其资源文件
小流星子学习博客
04-09 1048
参考： https://www.wddsss.com/main/displayArticle/297 想法很简单，就是使用https://github.com/react-native-webview/react-native-webview 直接显示项目中的HTML文件，单一文件时没有问题 <WebView style={{ width: 300, height: 300 }} source={requir('assets/web/test.html')}/> 能正常显示出来。.
React Native 中使用 WebView 加载本地 html
热门推荐
sunshinezx8023的博客
06-15 1万+
1. 主要属性source：在 WebView 中载入一段静态的 html 代码或是一个 url（还可以附带一些 header 选项）automaticallyAdjustContentInsets：设置是否自动调整内容。格式：boolcontentInset：设置内容所占的尺寸大小。格式：{top:number,left:number,bottom:number,right:number}inj...
rn webview加载本地静态html,RNwebview加载本地html.htm
weixin_33567029的博客
06-08 642
RNwebview加载本地htmlRNwebview加载本地htmlandroid下要在webview加入属性style="COLOR: #95c995; FONT-STYLE: italic">allowUniversalAccessFromFileURLsstyle="FONT-WEIGHT: bold; COLOR: #3adf3a">={style="FONT-WEIGHT: ...
RN实现混合式开发-内嵌html
weixin_38441229的博客
08-08 1582
React Native WebView是一个用于在React Native应用中嵌入Web内容的组件。它允许你在应用中显示网页、加载HTML字符串、运行JavaScript代码等。
react native使用WebView加载本地html部署方案
pengpengsays
04-18 3507
前言最近自己编写的react native安卓程序准备部署一下，发现调用的webview是本地的html文件，即url的格式是: http://localhost:8081/..这样的， 所以打包之后会出现加载不到页面的问题。所以下面就讲一下怎么样去修改，以便部署到线上不出问题。步骤1. 将html文件和相关的js/css等文件复制到asserts目录下    --即存放bundle包的目录，建议...
rn webview加载本地静态html,React Native - Webview 加载本地文件
weixin_32467749的博客
06-08 444
网上没找到合适的方法。用react-native-fs解决了一下，因为release之后静态文件地址发生改变，之前的引入就无效了1.项目根目录引入静态文件的文件夹 2.创建一个html，刚才引入的地址${RNFS.MainBundlePath}/web/*** ./EditorHtml*/let RNFS = require('react-native-fs');const htmlWeb =...
react-native-web-webview:React Native用于RN的WebView的Web实现
05-17
react-native-web-webview React Native用于RN的WebView的Web实现 入门 $ npm install react-native-web-webview --save 别名打包您的webpack配置中： resolve: { alias: { 'react-native': 'react-native-web', ... 'react-native-webview': 'react-native-web-webview', } } 将以下规则添加到您的webpack配置中： const rule = { test : / postMock.html $ / , use : { loader : 'file-loader' , options : {
react-native-storage：react-native和浏览器的本地存储包装器。 支持大小控制，自动过期，远程数据自动同步以及一次查询中获取批处理数据
02-05
React本机存储 这是用于响应本机应用程序（使用AsyncStorage）和Web应用程序（使用localStorage）的本地存储包装。 语法，承诺异步加载，并经过充分测试。 查看中文文档 安装 npm install react-native-storage npm install @react-native-community/async-storage 要么 yarn add react-native-storage yarn add @react-native-community/async-storage 链接 react-native link @react-native-c
react-native-webview.zip
08-06
react-native-webview.zip
react-native-webview-comlink
03-18
react-native-webview-comlink的目标是将与React Native WebView组件集成在一起，允许Web浏览器中的js调用本地API。 安装 安装软件包和Comlink ： npm i --save react-native-webview-comlink comlinkjs 弹出expo...
解决 Hbuilder打包 Apk pad 无法横屏 以及 H5 直接打包 成Apk
一码归一码@
12-18 5596
下面是创建app 项目 wap站首页地址 可以配置 你H5的登录页 也可以是 你的index 页面 然后 会有一些 配置 你可以去百度 manifest.json 这个 配置文件 配置一下 就可以了 很方便 打包后直接 可以安装 到手机上。如果 你有自己的H5 也可以 自己去创建一个空壳 只需要 加上你 H5的请求地址 就可以了。当然 你的 H5前提是做了 自适应 不然 样式会很丑的。下面是manifest.json 配置文件。
React-性能优化的手段
唯见青山不见君
04-20 868
React-性能优化的手段
React中redux、react-redux、@reduxjs/toolkit状态管理库的使用方式
关注最新技术问题并持续维护更新
04-17 533
【代码】React中redux、react-redux、@reduxjs/toolkit状态管理库的多种使用方式。
Vue3：响应式数据的基本使用（ref、reactive）
Junehhhhh的博客
04-19 673
在Vue3中，响应式数据的基本使用(ref、reactive)
如何在React中构建动态下拉组件 - 解释React复合组件模式
最新发布
晓风晓浪
04-23 391
下拉菜单长期以来一直是网站和应用程序中的重要组成部分。它们是用户交互的默默英雄，通过简单的点击或轻触默默地促进着无数的操作和决策。今天你可能已经遇到了其中之一，无论是在你最喜爱的在线商店上选择类别，还是在注册表单上选择你的出生日期。但如果我告诉你，有一个秘密配方可以将你的下拉菜单从平凡提升到华丽呢？加入我，我将解剖复合组件模式的奥秘，并利用其能力构建一个动态下拉组件。（本文视频讲解：java567.com）
解决React-Native-Webview ios加载时候白屏问题
06-11
React-Native-Webview是一个React Native中的WebView组件，同样会出现白屏问题。以下是一些可能的原因和解决方案： 1. iOS版本问题：如果使用的是较老的iOS版本，可能会出现WebView组件的兼容性问题，导致白屏。可以升级iOS版本来解决这个问题。 2. 缓存问题：iOS设备中的WebView会自动缓存已经加载过的网页，如果缓存过多可能会导致白屏。可以尝试清除WebView的缓存，可以参考以下代码： ```javascript import { WebView } from 'react-native-webview'; // ... <WebView source={{ uri: 'https://www.example.com' }} cacheEnabled={false} // ... /> ``` 3. WebKit问题：在iOS设备中，WebView默认使用的是WebKit，有时候可能会出现WebKit的问题导致白屏。可以尝试禁用WebKit来解决这个问题，可以参考以下代码： ```javascript import { WebView } from 'react-native-webview'; // ... <WebView source={{ uri: 'https://www.example.com' }} useWebKit={false} // ... /> ``` 4. 调试问题：在开发过程中，有时候可能会出现一些JavaScript错误导致WebView白屏。可以使用开发者工具来调试JavaScript代码，找出问题所在。 希望以上这些解决方案能够解决你的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值