React Native－12.React Native WebView组件详解

最新推荐文章于 2024-08-10 08:38:00 发布

Jsen_Wang

最新推荐文章于 2024-08-10 08:38:00 发布

阅读量6.7k

点赞数

分类专栏： iOS_React-Native for FaceBook 文章标签： native react RN WebView

本文链接：https://blog.csdn.net/wxs0124/article/details/50722135

版权

本文介绍了React Native中的WebView组件，详细讲解了其属性如automaticallyAdjustContentInsets、bounces、html、injectedJavaScript等，并通过实例展示了如何加载网页和自定义HTML代码。同时，提到了onNavigationStateChange等事件监听功能，帮助开发者实现更丰富的交互。

摘要由CSDN通过智能技术生成

WebView组件简介

目前的WebView支持的属性如下：

automaticallyAdjustContentInsets: 表示是否自动调整内部内容，其值为true或者false。
bounces：回弹效果。如果其值为false，则内容拉到底部或者头部不回弹。其值默认为true。
contentInset：内部内容移植，该值为一个JavaScript对象｛top：number，left：number，bottom：number，right：number｝。
html： HTML代码字符串。如果传入了HTMl代码字符串，则渲染该HTML代码。
injectedJavaScript：注入的JavaScript代码，其值为字符串。如果加上了该属性，就会在WebView中执行JavaScript代码。
onNavigationStateChange：监听导航状态变化的函数。
renderError：监听渲染页面出错的函数。
startInLoadingState：是否开启页面加载的状态，其值为true或者false。
renderLoading:WebView组件正在渲染页面时触发的函数，需要同startInLoadingState一起使用，当startLoadingState为true时该函数才起作用。
scrollEnabled：表示WebView里面页面是否滚动，乳沟其值为true表示可以滚动，false表示禁止滚动。
onNavigationStateChange：页面导航状态改变时，触发该事件监听。
scalesPageToFit：按照页面比例和内容宽高比利自动缩放内容。