react-native-webview 本地化加载Html

最新推荐文章于 2023-12-18 15:40:07 发布
最新推荐文章于 2023-12-18 15:40:07 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： react-native 文章标签： webview react.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014613941/article/details/120223231
版权
本文介绍了如何在React Native (RN)应用中使用webview加载本地HTML，包括解决JavaScript跨域问题。步骤包括创建bundle文件、集成到RN项目、Android和iOS的配置调整，以及在RNCWebView.m中修改允许跨域设置。
摘要由CSDN通过智能技术生成

有些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 webview加载本地静态html,React Native 使用 react-native-webview 渲染 HTML
weixin_26516841的博客
06-08 564
在 App 中，渲染 HTML 是一个非常常见的功能，有可能是直接渲染 HTML 字符串或者是通过 URL 渲染远程 HTML页面。React Native 提供了一个 WebView 组件以供我们实现 HTML 的渲染。早先 WebView 是在 React Native 核心包中，后来为了减小 React Native 核心包的体积，便将其单独提出到 react-native-webview组...
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 655
RNwebview加载本地htmlRNwebview加载本地htmlandroid下要在webview加入属性style="COLOR: #95c995; FONT-STYLE: italic">allowUniversalAccessFromFileURLsstyle="FONT-WEIGHT: bold; COLOR: #3adf3a">={style="FONT-WEIGHT: ...
ReactNative WebView加载本地HTML
吴佩佩佩佩的博客
06-29 1617
将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', }} /&
RN实现混合式开发-内嵌html
weixin_38441229的博客
08-08 1651
React Native WebView是一个用于在React Native应用中嵌入Web内容的组件。它允许你在应用中显示网页、加载HTML字符串、运行JavaScript代码等。
react native使用WebView加载本地html部署方案
pengpengsays
04-18 3553
前言最近自己编写的react native安卓程序准备部署一下，发现调用的webview是本地的html文件，即url的格式是: http://localhost:8081/..这样的， 所以打包之后会出现加载不到页面的问题。所以下面就讲一下怎么样去修改，以便部署到线上不出问题。步骤1. 将html文件和相关的js/css等文件复制到asserts目录下    --即存放bundle包的目录，建议...
react-native-webview.zip
08-06
React Native WebView是一个流行的开源库，它允许React Native应用嵌入网页内容。这个库使得开发者能够利用Web技术（HTML、CSS和JavaScript）与React Native原生功能的结合，为移动应用提供丰富的交互体验。在...
maka-native：React Native ft。redux-saga和朋友的有思想的入门者
02-04
马卡本地人 Maka Native是一个自以为是的样板，可用于使用TypeScript，redux，redux-saga，样式化组件，故事书等制作React Native驱动的移动应用程序。 由于它是新应用程序的起点，因此它不使用任何类组件，并且在很...
react-native-complete-demo:这个仓库提供了一个完整的react native app demo，包括集成 react navigation，redux，网络请求及自定义组件
05-17
一个完整、普适但不臃肿的 React Native 脚手架，具有下述特点：React Navigation 路由导航（可以自定义单个页面进入动画）；集成 Redux 进行状态管理，并实现本地持久化存储；使用 Fetch API 进行网络请求；自定义...
rn-xnote:React Native的笔记应用程序功能
05-21
在XNOTE中，Markdown编辑器是通过WebView实现的，这是一个可以在React Native应用中嵌入网页内容的组件。WebView使得在原生应用中集成复杂Web功能成为可能，如Markdown渲染。 **HTML与Markdown的交互** 虽然XNOTE...
引用的包1
08-08
`react-native-webview` 用于在React Native应用中嵌入网页，这在需要展示HTML内容或加载第三方网站时非常实用。它还支持与JavaScript的交互，使得网页和原生应用之间可以通信。 `react-router-native` 是React ...
rn webview加载本地静态html,React Native - Webview 加载本地文件
weixin_32467749的博客
06-08 469
网上没找到合适的方法。用react-native-fs解决了一下，因为release之后静态文件地址发生改变，之前的引入就无效了1.项目根目录引入静态文件的文件夹 2.创建一个html，刚才引入的地址${RNFS.MainBundlePath}/web/*** ./EditorHtml*/let RNFS = require('react-native-fs');const htmlWeb =...
rn webview加载本地静态html,IOS开发入门之ReactNative Webview加载本地html异常问题
weixin_35472986的博客
06-08 622
本文将带你了解IOS开发入门ReactNative Webview加载本地html异常问题，希望本文对大家学IOS有所帮助。ReactNative Webview加载本地html异常问题，本文主要解决ios发布release版本时，react native webview加载本地html显示异常问题。产生此问题得条件：ios加载本地的html，且html内部包含引用外部的js链接(注：链接...
React Native Webview 加载本地html
Wubo的博客
03-12 5374
https://reactnative.cn/docs/webview/#injectedjavascript 官网webview介绍 https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md 这个是安装webview https://blog.csd...
ReactNative系列之十一原生RN控件WebView与Html5之件的调用
--------→成人不自在，自在不成人℃ ------------
03-13 510
1、前言系列九讲解过使用第三方WebViewBridge与Html5之间的通信，但在ReatNative0.37之后，增强的WebView的功能，不需要第三方也可以原生支持互调与传递数据2、主要代码export default class Render extends Component { constructor(props) { super(props); thi...
ReactNative进阶（十）：WebView 应用详解
IT全栈 华强工作室
04-26 6209
使用WebView组件可通过url来加载显示一个网页，也可以传入一段html代码来显示。下面对其主要属性和方法进行介绍。1. 主要属性source：在WebView中载入一段静态的html代码或是一个url（还可以附带一些header选项）；：设置是否自动调整内容。bool；：设置内容所占的尺寸大小。：当网页加载之前注入一段js代码。其值是字符串形式。（默认值：无）：是否开启页面加载的状态，其值为true或者false。bounces（仅iOS，默认值：true）：回弹特性。如果设置为false。
react-native-webview 渲染html
wxl1390的博客
01-05 1141
react-native-webview 渲染html
解决 Hbuilder打包 Apk pad 无法横屏 以及 H5 直接打包 成Apk
最新发布
一码归一码@
12-18 6057
下面是创建app 项目 wap站首页地址 可以配置 你H5的登录页 也可以是 你的index 页面 然后 会有一些 配置 你可以去百度 manifest.json 这个 配置文件 配置一下 就可以了 很方便 打包后直接 可以安装 到手机上。如果 你有自己的H5 也可以 自己去创建一个空壳 只需要 加上你 H5的请求地址 就可以了。当然 你的 H5前提是做了 自适应 不然 样式会很丑的。下面是manifest.json 配置文件。
解决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、付费专栏及课程。

余额充值