RN中WebView的使用

最新推荐文章于 2024-06-06 12:04:00 发布
最新推荐文章于 2024-06-06 12:04:00 发布
阅读量1.7k 收藏 1
点赞数 1
分类专栏： React Native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43374226/article/details/113857783
版权

对于react native中的富文本的嵌入可以使用WebView，本文阐述的是作者在工作中自己遇到的问题和解决方法

1.WebView可以嵌入一段html代码，也可以嵌入一个url访问网页
例如：

<WebView
   source={{uri: 'https://github.com/facebook/react-native'}}
   style={{marginTop: 20}}
/>

也可以嵌入一段静态的html

render() {
	const INJECTEDJAVASCRIPT = `
	       //高度获取
	       let webHeight = document.body.scrollHeight;
	       window.ReactNativeWebView.postMessage(webHeight);
   		`;
	return (
		<WebView
			ref={'webview'}
		    style={{ width: '100%', height: this.state.webHeight }}
		    scalesPageToFit={false} //布尔值，控制网页内容是否自动适配视图的大小，同时启用用户缩放功能。默认为true
		    scrollEnabled={false} //控制是否在 WebView中启用滑动。默认为 true
		    javaScriptEnabled={true} //布尔值，控制是否启用 JavaScript。仅在安卓下使用，因为 IOS 默认为启用 JavaScript。默认值为true
			//在 WebView 中载入一段静态的 html 代码或是一个 url（还可以附带一些 header 选项）
		    source={{
		        html: `<!DOCTYPE html>
		        <html lang="en">
		        <head>
		            <meta charset="UTF-8">
		            <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		            <title>Document</title>
		            <style>
		                *{
		                    margin:0;
		                    padding:0;
		                }
		                span{
		                    word-break:normal; 
		                    white-space:pre-wrap;
		                    word-wrap: break-word;
		                }
		                #contentBox{
		                    width: 100%!important;
		                    padding: 0 5px;
		                    box-sizing:border-box;
		                }
		                #contentBox h1{
		                    font-size: 16px!important;
		                }
		                #contentBox p{
		                    font-size: 14px!important;
		                }
		                img{
		                    display: block;
		                    width: 100%!important;
		                }
		                table {
		                    display: block;
		                    width: 100%!important;
		                    overflow-x: auto;
		                }
		            </style>
		        </head>
		        <body>
		            <div id="contentBox">${this.state.infoContent}</div>
		        </body>
		        </html>`}}
		    //injectedJavaScript={INJECTEDJAVASCRIPT} //设置 js 字符串，在网页加载之前注入的一段 JS 代码
		    onLoadEnd={this.webViewLoaded} // webview加载完毕后执行
		    onMessage={(event) => {
		        //console.log('测试onMessage参数列表'+JSON.stringify(event.nativeEvent.data))
		        this.onMessage1(event)
		    }}
		/>
	)
}

webViewLoaded = () => {
	this.refs.webview.injectJavaScript = `
	       //高度获取
	       let webHeight = document.body.scrollHeight;
	       window.ReactNativeWebView.postMessage(webHeight);
	`
}

onMessage1 = (msg) => {
	  if (msg.nativeEvent.data !== undefined && msg.nativeEvent.data !== null) {
	      this.setState({
	          webHeight: parseInt(msg.nativeEvent.data)
	      })
	  }
}

2.使用WebView时需给其赋值高度，由于我的使用场景中高度内容不固定，所以使用了injectJavaScript注入JS，来动态获取高度，并且通过postMessage来进行传值后赋值。值得注意的是，onMessage接受参数时，需先进行判空。

以上就是本人目前在RN中使用WebView所遇到的问题和解决方法，欢迎一起讨论学习

Mr. Yang`
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
史上最强reactNative中react-native-webview交互封装
xiaoerduo123x的博客
01-16 825
在开发reactNative过程中，一些复杂易变的需求，我们也会经常写在H5的项目中，这时候就需要RN和H5交互的效果了，以下是我封装的webview代码。
ReactNative进阶（十）：WebView 应用详解
IT全栈 华强工作室
04-26 6270
使用WebView组件可通过url来加载显示一个网页，也可以传入一段html代码来显示。下面对其主要属性和方法进行介绍。1. 主要属性source：在WebView中载入一段静态的html代码或是一个url（还可以附带一些header选项）；：设置是否自动调整内容。bool；：设置内容所占的尺寸大小。：当网页加载之前注入一段js代码。其值是字符串形式。（默认值：无）：是否开启页面加载的状态，其值为true或者false。bounces（仅iOS，默认值：true）：回弹特性。如果设置为false。
RN解析富文本内容的插件
最新发布
weixin_68658847的博客
06-06 220
RN解析富文本内容的插件
react-native-webview 渲染html
wxl1390的博客
01-05 1143
react-native-webview 渲染html
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 : {
ReactNative WebView组件详解
AnitaSun的博客
06-07 1456
在Android开发的时候，如果有加载网页的需求或者执行一些Javascript，可以使用WebView 属性 automaticallyAdjustContentInsets 控制是否调整放置在导航条、标签栏或工具栏后面的web视图的内容。默认值为true contentInset {top: number, left: number, bottom: number, right: number} 设置网页内嵌边距 injectedJavaScript 设置在网页加载之前注入一段js代码 media.
reactnative 与webview通信
卓原的进化之旅
09-25 4887
WebView是ReactNative中的组件 , 它可以创建一个原生的WebView，可以用于访问一个网页. 有时候我们需要在RN与WebView之间进行通信,或者进行数据传递,或者发送消息通知.这时候就要用以下知识了. 一:WebView向RN端发送数据: 首先,我们构建一个webview: <WebView ref={'webview'} source={
解决RN 的 webview 组件不支持android客户端上传图片文件问题
05-06
在React Native（RN）开发中，Webview组件是用于嵌入HTML内容的桥梁，它允许开发者在原生应用中展示网页。然而，由于RN的Webview与原生Android客户端之间的交互存在一些限制，可能导致在Android平台上无法通过...
rn-webview-rpc:向 React Native WebView 组件添加 RPC 功能
08-05
RN-WebView-RPC 将 React-Native 的组件与 Google 的库集成到一个易于使用的包中。 例如，下面的代码片段允许打开一个本地警报，让用户选择 html 网页的背景颜色。 // App.js import React from 'react' ; ...
react native 使用webview自动响应，解析html内容组件
11-08
react native 使用webview自动响应，解析html内容组件，非常适合
React Native的WebView与html双向通信
流星雨的博客
06-09 725
安卓、ios原生与html双向通信相对简单且成熟，但是React Native与html的双向通信存在那么一丢丢的坑
ReactNative进阶（十）：WebView 应用详解_react native webview
2301_82243603的博客
04-29 1158
项目里用到了react，为什么要选择react，react有哪些好处。有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢。react生命周期函数和react组件的生命周期。react和Vue的原理，区别，亮点，作用。react的组件是通过什么去判断是否刷新的。Redux中间件是什么东西，接受几个参数。React的jsx，函数式编程。react高阶组件知道吗？reactJs的组件交流。react的生命周期函数。发送的数据,可以通过。获取发送过来的数据。怎么获取真正的dom。选择react的原因。
android rn 和webview,react-native中安卓webview和js层通信
weixin_30905655的博客
05-27 586
前言：学习rn已经有大半年了，目前的项目是采用rn的，在项目中曾遇到webview中调用postMessage，然后在浏览器和真机中查看，发现在浏览器中会报错，后者不会报错，然后觉得很奇怪，因此就去粗略的研究了一下rn中webview的实现。由于webview涉及很多东西，所以这一篇写介绍一下安卓的webview，下篇再继续介绍ios的webview。介绍：webview主要是用来进行页面请求，页...
rn webview加载本地静态html,React Native：如何在WebView内加载SPA或本地静态HTML页面？...
weixin_35823755的博客
06-08 715
React Native：如何在WebView内加载SPA或本地静态HTML页面？React Native WebView允许你使用uri属性加载可公开访问的资源，就像程序内的一个浏览器。但是，当你要加载本地html或者SPA应用时，它并不是那么简单。通常在APP内部接入WebView时，我们可以有两种选择，一是通过uri指向一个公开的网页地址，从而加载远程网页。二是指向一个本地的静态HTML文件...
react native利用webvView嵌入h5页面以及RN与webView的通信
铁柱的博客
12-27 7867
前言：这边主要是记录下，在react native中如何使用h5页面，以及h5页面发生点击，或者跳转到react native时，如何与react native进行通信。一、react native中的webview组件1、为什么要用webview页面。      我这边用webview是因为用rn来写页面，速度实在是感人。而且RN里面的样式没有css那么全面。如果要做弹出层等，还需要使用rn的组件
react-native <WebView>内部网页跳转并返回上一级
xiaoyinliuyun的专栏
08-03 5252
使用Rn的WebView控件时，遇到的网页内部跳转如何返回的问题。 点原生Back键返回； 点左上角返回键返回；
《React-Native系列》29、 RN组件之WebView
热门推荐
等待就是浪费青春
09-09 2万+
说起WebView，我们还是很熟悉的吧。特别是做过Hybrid开发的同学，Web+Native一个很经典的开发模式，包括现在依然很多App上都在使用。我们列举几个比较重要的属性吧source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number 在W
RN的webview使用问题记录, 待解决
openglnewbee的博客
07-22 2386
使用RN的webview过程中，遇到了疑似功能性的bug.(RN 0.44.3, iOS模拟器环境)在webview页面之外提供了一个新的按钮用于切换到制定的uri,但测试过程中该按钮的切换行为只在第一次生效，后续点击没有效果。调试设置的state的uri改变了，render也触发了；但页面不刷新。到native层调试发现rctwebview.m 里面的setsource没有触发。 目前初步定位是
React Native 原生RN嵌套webView，并自适应高度
七月、代码君
09-20 2870
封装自适应高度的webViewimport React, { Component } from 'react'; import { Text, WebView, ScrollView, PixelRatio, View, Platform, ActivityIndicator, } from 'react-native';let thisWeb
html中使用webview
06-02
抱歉，我的回答不够清晰。我重新回答一下： 在 HTML 中使用 Webview 是不可能的，因为 Webview 是 Android 平台上的一个控件。不过，您可以在 Android 应用程序中嵌入一个 Webview 控件，并使用 Webview 控件来展示您的 HTML 页面。 以下是在 Android 应用程序中使用 Webview 控件来展示 HTML 页面的基本步骤： 1. 在布局文件中添加 Webview 控件。例如： ``` <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 2. 在您的 Activity 中获取对 Webview 控件的引用，并使用 `loadUrl()` 方法加载 HTML 页面。例如： ``` WebView webView = findViewById(R.id.webview); webView.loadUrl("https://www.example.com"); ``` 3. 如果您需要加载本地 HTML 文件，可以使用 `loadUrl()` 方法或 `loadData()` 方法。例如： ``` webView.loadUrl("file:///android_asset/myfile.html"); // or String html = "<html><body><h1>Hello, world!</h1></body></html>"; webView.loadData(html, "text/html", "UTF-8"); ``` 以上就是在 Android 应用程序中使用 Webview 控件展示 HTML 页面的基本步骤。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值