React-native之WebView（14）

一. 简介

在原生开发中加载网页时经常用到WebView ,RN也给我们提供了WebView控件，可以用于访问一个网页。

二. 属性

• automaticallyAdjustContentInsets
  是否自动调整内部内容
• allowsInlineMediaPlayback bool （ios）
  指定HTML5视频是在网页当前位置播放还是使用原生的全屏播放器播放。 默认值为false。
  注意 : 要让视频在网页中播放，不光要将这个属性设为true，HTML中的视频元素本身也需要包含webkit-playsinline属性。
• bounces bool （ios）
• contentInset {top: number, left: number, bottom: number, right: number}
  内部内容偏移值 该值为一个JavaScript对象
• dataDetectorTypes enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), [object Object]
  探测网页中某些特殊数据类型，自动生成可点击的链接，默认情况下仅允许探测电话号码。
  你可以指定探测下述类型中的一种，或者使用数组来指定多个类型。
  dataDetectorTypes的可选值：
  'phoneNumber'
  'link'
  'address'
  'calendarEvent'
  'none'
  'all'
• domStorageEnabled bool （android）
  指定是否开启DOM本地存储。
• injectedJavaScript string
  注入的js代码，其值为字符串，如果加上了该属性，就会在webview里面执行js代码（在网页加载之前注入）
• mediaPlaybackRequiresUserAction bool
  设置页面中的HTML5音视频是否需要在用户点击后再开始播放。默认值为true.
• source:{{uri:'网址'}}
  在WebView中载入一段静态的html代码或是一个url（还可以附带一些header选项）{{html:'html代码块'}}
• onError function
  加载失败时调用。
• onLoad function
  加载成功时调用。
• onLoadEnd function
  加载结束时（无论成功或失败）调用。
• onLoadStart function
  加载开始时调用。
• onMessage function
  在webview内部的网页中调用window.postMessage方法时可以触发此属性对应的函数，从而实现网页和RN之间的数据交换。 设置此属性的同时会在webview中注入一个postMessage的全局函数并覆盖可能已经存在的同名实现。
  网页端的window.postMessage只发送一个参数data，此参数封装在RN端的event对象中，即event.nativeEvent.data。data 只能是一个字符串。
• javaScriptEnabled bool （android）
  iOS平台JavaScript是默认开启的。
• onNavigationStateChange function
  监听导航状态变化的函数（当发现浏览器地址改变时，触发事件）
• onShouldStartLoadWithRequest function （ios）
  允许为webview发起的请求运行一个自定义的处理函数。返回true或false表示是否要继续执行响应的请求。
• renderError function
  设置一个函数，返回一个视图用于显示错误。
• startInLoadingState
  是否开启页面加载的状态
• renderLoading function
  webview组件正在渲染页面时触发的函数，需要同startInLoadingState一起使用，当startInLoadingState为true时该函数才起作用
• scalesPageToFit bool
  设置是否要把网页缩放到适应视图的大小，以及是否允许用户改变缩放比例。
• scrollEnabled bool （ios）
  表示webview里面页面是否能滚动，如果其值为true则可以滚动，否则禁止滚动
• userAgent string （android）
  为WebView设置user-agent字符串标识。这一字符串也可以在原生端用WebViewConfig来设置，但js端的设置会覆盖原生端的设置。

三. 示例

const screenWidth =Dimensions.get('window').width; const screenHeight =Dimensions.get('window').height;

render(){ return (
<View style={styles.flex}> <WebView style={{width:screenWidth , height:screenHeight }} source={{uri:'http://www.baidu.com'}} {/*injectedJavaScript ={"alert('测试一下injectedJavaScript属性')"}*/}> </WebView> </View>
); }

效果

webview_01.png