react native学习笔记14——WebView的使用及与html通信

加载一个在线网页

下例是一个最简单的WebView的使用，给定一个url网址，用WebView加载渲染出来。

import React, { Component } from 'react';
import { WebView } from 'react-native';

export default class WebViewSimpleDemo extends Component {
    render() {
        return (
            <WebView
                source={{uri: 'http://blog.csdn.net/column/details/17061.html'}}
            />
        );
    }
}

效果图：

通常项目中使用WebView并不是简单的加载一个静态网页，例如显示一个加载页，提供一个统一的加载失败页，webview如何与rn双向通讯等。为了能完成上述需求，我们还需要学习WebView的基本属性和方法。

基本属性

属性	类型	描述
source	{uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number	在WebView中载入一段静态的html代码或是一个url（还可以附带一些 header 选项）
automaticallyAdjustContentInsets	bool	设置是否自动调整内容。
contentInset	{top:number,left:number, bottom:number,right:number}	设置网页内嵌边距。
startInLoadingState	bool	在第一次加载时是否显示loading视图。默认true。
bounces（iOS）	bool	指定滑动到边缘后是否有回弹效果。默认true。
scalesPageToFit（iOS）	bool	设置是否要把网页缩放到适应视图的大小，以及是否允许用户改变缩放比例。
scrollEnabled（iOS）	bool	设置是否开启页面滚动。
domStorageEnabled（Android）	bool	是否开启DOM存储。
javaScriptEnabled（Android）	bool	是否开启 JavaScript，在 iOS 中的 WebView 是默认开启的。

基本方法

方法名	描述
injectJavaScript	给WebView注入JS代码，注入后会立即执行。
onNavigationStateChange	当导航状态发生变化的时候调用。
onLoadStart	当网页开始加载的时候调用。
onError	当网页加载失败的时候调用。
onLoad	当网页加载结束的时候调用。
onLoadEnd	当网页加载结束调用，不管是成功还是失败。
renderLoading	WebView组件正在渲染页面时触发的函数，只有 startInLoadingState 为 true 时该函数才起作用。
renderError	监听渲染页面出错的函数。
onShouldStartLoadWithRequest（iOS）	该方法允许拦截 WebView 加载的 URL 地址，进行自定义处理。该方法通过返回 true 或者 false 来决定是否继续加载该拦截到请求。

根据上面介绍的基本属性方法，我们在加载WebView中增加加载中和加载失败的页面显示。

    <WebView
        source={{uri: 'http://blog.csdn.net/column/details/17061.html'}}
        renderError={() => {
            console.log('renderError')
            return <View><Text>renderError</Text></View>
        }}
        renderLoading={() => {
            return <View><Text>自定义Loading...</Text></View>
        }}
    />

renderError加载错误时会回调该函数，显示该函数返回的View。使用此方法我们可以自定义加载错误时的提示信息。
类似的renderLoading可以自定义加载显示的view。

加载本地静态html文件

import React, { Component } from 'react';
import { WebView } from 'react-native';

export default class WebViewSimpleDemo extends Component {
    render() {
        return (
            <WebView
                source={require('./helloworld.html')}
            />
        );
    }
}

helloworld.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=320, user-scalable=no">
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        font: 62.5% arial, sans-serif;
        background: #ccc;
      }
      h1 {
        padding: 45px;
        margin: 0;
        text-align: center;
        color: #f33;
      }
    </style>
  </head>
  <body>
  <h1>hello world!</h1>
  </body>
</html>

效果图：

React Native与Html通信

React Native向html发数据——postMessage

React Native向html发送数据可以通过postMessage方法实现。

React Native端
设置WebView的ref属性，将组件view作为参数赋值给了this.webview

    <WebView
        ref={(webview) => this.webview = webview}
        source={require('./messaging.html')}
    />

然后可通过postMessage方法从React Native向html发送数据

  this.webview.postMessage('我是React Native发送过来的数据');

html端
html端接收React Native消息的处理：

    var messagesReceivedFromReactNative = 0;
    document.addEventListener('message', function(e) {
      messagesReceivedFromReactNative += 1;
      document.getElementsByTagName('p')[0].innerHTML =
        '从React Native接收的消息: ' + messagesReceivedFromReactNative;
      document.getElementsByTagName('p')[1].innerHTML = e.data;
    });

React Native接收html发过来的数据——onMessage

React Native接收html发过来的数据可以通过onMessage方法实现。

html端
html端通过调用window.postMessage给React Native发送数据。

document.getElementsByTagName('button')[0].addEventListener('click', function() {
      window.postMessage('这是html发送到RN的消息');
    });

React Native端
当有html发送数据过来时会触发WebView的onMessage，在onMessage中处理接收到的数据。

    <WebView
        ref={(webview) => this.webview = webview}
        source={require('./messaging.html')}
        onMessage={this._onMessage}
    />
    //接收HTML发出的数据
    _onMessage = (e) => {
        Alert.alert(e.nativeEvent.data);
    }

效果图

React Native与Html通信的完整代码在Github