ReactNative WebView组件详解

• 在Android开发的时候，如果有加载网页的需求或者执行一些Javascript，可以使用WebView

属性

• automaticallyAdjustContentInsets
  控制是否调整放置在导航条、标签栏或工具栏后面的web视图的内容。默认值为true
• contentInset {top: number, left: number, bottom: number, right: number}
  设置网页内嵌边距
• injectedJavaScript
  设置在网页加载之前注入一段js代码
• mediaPlaybackRequiresUserAction
  设置页面中的HTML5音视频是否需要在用户点击后再开始播放。默认值为true
• scalesPageToFit
  设置是否要把网页缩放到适应视图的大小，以及是否允许用户改变缩放比例。
• source
  在WebView中指定加载内容html或者url,可以指定header,method等
• startInLoadingState
  强制WebView在第一次加载时先显示loading视图。默认为true
• domStorageEnabled（android）
  布尔值,指定是否开启DOM本地存储
• javaScriptEnabled（android）
  布尔值,指定WebView中是否启用JavaScript。只在Android上使用，因为在iOS上默认启用了JavaScript。
• mixedContentMode(android)
  指定混合内容模式。即WebView是否应该允许安全链接（https）页面中加载非安全链接（http）的内容,
  ‘never’ (默认) - WebView不允许安全链接页面中加载非安全链接的内容
  ‘always’ - WebView允许安全链接页面中加载非安全链接的内容。
  ‘compatibility’ - WebView会尽量和浏览器当前对待此情况的行为一致
• userAgent(android)
  为WebView设置user-agent字符串标识。这一字符串也可以在原生端用WebViewConfig来设置，但js端的设置会覆盖原生端的设置。
• allowsInlineMediaPlayback（ios）
  指定HTML5视频是在网页当前位置播放还是使用原生的全屏播放器播放。 默认值为false,视频在网页播放还需要设置webkit-playsinline
• bounces(ios)
  指定滑动到边缘后是否有回弹效果。
• decelerationRate（ios）
  指定一个浮点数，用于设置在用户停止触摸之后，此视图应以多快的速度停止滚动。也可以指定预设的字符串值，如"normal"和"fast"，
• scrollEnabled（ios）
  是否启用滚动

函数

• injectJavaScript
  函数接受一个字符串，该字符串将传递给WebView，并立即执行为JavaScript
• onError
  加载失败时回调
• onLoad
  完成加载时回调
• onLoadEnd
  加载成功或者失败都会回调
• onLoadStart
  开始加载的时候回调
• onMessage
  在webView内部网页中，调用window.postMessage可以触发此属性对应的函数，通过event.nativeEvent.data获取接收到的数据，实现网页和RN之间的数据传递
• renderError
  返回一个视图用来提示用户错误
• renderLoading
  返回一个加载指示器
• onShouldStartLoadWithRequest(ios)
  请求自定义处理，返回true或false表示是否要继续执行响应的请求

实战分析

加载网页：

• 加载网页的时候应该指定宽、高，否则都是0

  <WebView
      source={{uri:'http://www.jianshu.com/u/d5b531888b2b'}}
      style={{width:'100%',height:'100%'}}
  />
  

• 给WebView增加加载时的回调

  onLoad={(e) => console.log('onLoad')}
  onLoadEnd={(e) => console.log('onLoadEnd')}
  onLoadStart={(e) => console.log('onLoadStart')}
  // 当加载错误时会回调该函数，并且显示该函数返回的View
  renderError={() => {
      console.log('renderError')
      return <View><Text>renderError回调了，出现错误</Text></View>
  }}
  // 自定义加载提示
  renderLoading={() => {
      return <View><Text>这是自定义Loading...</Text></View>
  }}
  
  //需求展示出请求的url，网页的标题，以及是否可前进或者后退
  // 只有在加载开始和结束的时候回调
  onNavigationStateChange={this._onNavigationStateChange}
  _onNavigationStateChange = (navState) => {
      console.log(navState)
      this.setState({
          backButtonEnabled: navState.canGoBack,
          forwardButtonEnabled: navState.canGoForward,
          url: navState.url,
          status: navState.title,
          loading: navState.loading,
      });
  }
  

---

加载HTML：

• 在页面顶部引入webview组件

  import{
    View,
    ScrollView,
    Image,
    Text,
    WebView,
  } from 'react-native';
  

• 引入组件后，在页面中使用webview引入h5的页面

  return (
  	<WebView
  	  style={webView_style}
  	  scrollEnabled={false} 
  	  javaScriptEnabled={true}  
  	  injectedJavaScript={'插入到h5页面中的js代码'}
  	  onMessage={event => {'接收h5页面传过来的消息'}}
  	  source={{uri: '你的可访问的h5链接'}}
  	></WebView>
  );
  

• 设置宽高

  <WebView>
      style={{width:'100%',height:'100%'}}
      source={require('./helloworld.html');}
  </WebView>
  

• RN和HTML的通信
  React Native 的 WebView 和 H5 相互发送监听消息