rn 嵌套网页webView

谁践踏了优雅 2021-07-24 12:15 429阅读 0赞

yarn add react-native-webview
    	import { WebView } from 'react-native-webview';
    
    1、使用,WebView自身没有高度,需要设置父元素高度
    
    	<WebView
            source={
       {uri: '网页地址'}}
            style={
       {marginTop: 20}}
      	/>
      	
      	<WebView
            originWhitelist={['*']}  加载html代码必须设置该属性
            source={
       { html: '<h1>Hello world</h1>' }}
      	/>
     
     	其中:加载本地html文件
     	(1)将html文件放置在android\app\src\main\assets目录下
     	(2)引入方式为source={
       {uri:'file:///android_asset/文件名.html'}}
    
    2、参数
    	source
    		method 
    		headers
    		body
    		uri
    		html
    		baseUrl
    	mediaPlaybackRequiresUserAction	布尔值，控制 HTML5 音频和视频播放前是否需要用户点击。默认为true。
    	onError	当 WebView加载失败时调用的函数
    	onLoad	当 WebView加载成功后执行的函数
    	onLoadEnd	函数，当加载结束调用，不管是成功还是失败。
    	onLoadStart	当 WebView刚开始加载时调用的函数
    	onMessage	在 webview 内部的网页中调用 window.postMessage 方法时可以触发此属性对应的函数，从而实现网页和 RN 之间的数据交换。 设置此属性的同时会在 webview 中注入一个 postMessage 的全局函数并覆盖可能已经存在的同名实现。网页端的 window.postMessage 只发送一个参数 data，此参数封装在 RN 端的 event 对象中，即 event.nativeEvent.data。data 只能是一个字符串。
    	scalesPageToFit	布尔值，控制网页内容是否自动适配视图的大小，同时启用用户缩放功能。默认为true
    	onShouldStartLoadWithRequest	允许为 webview 发起的请求运行一个自定义的处理函数。返回 true 或 false 表示是否要继续执行响应的请求。
    	domStorageEnabled	仅限 Android 平台。指定是否开启 DOM 本地存储。
    	javaScriptEnabled	布尔值，控制是否启用 JavaScript。仅在安卓下使用，因为 IOS 默认为启用 JavaScript。默认值为true。
    	thirdPartyCookiesEnabled	布尔值，是否启用第三方 cookie。仅在安卓 Lollipop 版本或以上使用，因为安卓 Kitkat 以下版本和 IOS 系统默认都启用第三方 cookie。 默认为 true
    	allowsInlineMediaPlayback	布尔值，控制 HTML5 视频是在内部播放(非全屏)还是使用原生的全屏控制器。默认为 false。
    	contentInset	插入到滑动视图时距离边缘的距离。默认为{top: 0, left: 0, bottom: 0, right: 0}。
    	
    3、方法
    	goForward();	根据 webview 的历史访问记录往前一个页面。
    	goBack()	根据 webview 的历史访问记录往后一个页面。
    	reload()	刷新当前页面。
    	stopLoading()	停止载入当前页面。