React Native资料汇总React NativeAndroid开发经验谈

ReactNative WebView组件详解

2017-08-14  本文已影响8081人  Code4Android

源码传送门
在开发Android的时候，一般我们会有一些加载网页的需求，或者执行一些JavaScript，我们都知道在Android中实现这个功能的控件是WebView,在ReactNative中也有实现此类需求额的组件，它的名字也是WebView。那么今天的这篇文章就来详细说说在ReactNative WebView的使用。本文示例效果图

webview.gif

属性

函数

实战分析

通过上面的介绍，我们已经对组件的属性以及函数有了大致的了解，当然只有这些是不够的，接下来就该组件的使用展开分析，效果图如文章开头的GIF图。对于该组件最简单的使用如下

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

指定source属性，加载网页，设置宽和高全屏，需要注意的是必须指定宽和高，否则将不显示组件，默认宽高都是0。
给WebView增加加载时的回调

                    onLoad={(e) => console.log('onLoad')}
                    onLoadEnd={(e) => console.log('onLoadEnd')}
                    onLoadStart={(e) => console.log('onLoadStart')}
                    renderError={() => {
                        console.log('renderError')
                        return <View><Text>renderError回调了，出现错误</Text></View>
                    }}
                    renderLoading={() => {
                        return <View><Text>这是自定义Loading...</Text></View>
                    }}

renderError可以自定义加载错误的提示信息View.当加载错误时会回调该函数，并且显示该函数返回的View。使用此方法我们可以自定义加载错误时的提示信息。
而renderLoading函数可以自定义加载提示.当我们通过WebView加载一个网页时，往往我们有需求展示出请求的url，网页的标题，以及是否可前进或者后退。在WebView组件中有一个函数onNavigationStateChange可以实现此功能，他是在加载开始和结束的时候回调的，

   //添加属性
   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,
        });
    }

当canGoBack返回值为true时，我们就可以使用this.webview.goBack();（this.webview是WebView的引用）对网页进行回退操作，同理当canGoForward为true时我们就可以使用 this.webview.goForward();对我们的网页进行跳转操作。当我们的网页url发生改变时我们可以使用 this.webview.reload();加载新的网页。

加载HTML

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

RN和Html通信

当WebView加载html时我们可以实现html和rn之间的通信。rn向html发生数据可以通过postMessage函数实现。如下

this.webview.postMessage('"Hello" 我是RN发送过来的数据');
//在html中注册事件接收rn发过来的数据并显示在html中
    document.addEventListener('message', function(e) {
      messagesReceivedFromReactNative += 1;
      document.getElementsByTagName('p')[0].innerHTML =
        '从React Native接收的消息: ' + messagesReceivedFromReactNative;
      document.getElementsByTagName('p')[1].innerHTML = e.data;
    });

在html中我们定义了一个按钮，并添加事件向rn发送数据

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

当html中调用了window.postMessage函数后，WebView的onMessage函数将会被回调，用来处理html向rn发送的数据,可以通过e.nativeEvent.data获取发送过来的数据。

    //接收HTML发出的数据
    _onMessage = (e) => {
        this.setState({
            messagesReceivedFromWebView: this.state.messagesReceivedFromWebView + 1,
            message: e.nativeEvent.data,
        })
        Alert.alert(e.nativeEvent.data)
    }

JavaScript

在android这个需要使用 javaScriptEnabled属性来支持JavaScript，ios默认是支持的，没有此属性。在WebView中提供了函数injectJavaScript（String）,它有一个字符串参数，可以向webview中注入脚本，如下

    //脚本注入
    injectJS = () => {
        const script = 'document.write("Injected JS ")';  // eslint-disable-line quotes
        if (this.webview) {
            this.webview.injectJavaScript(script);
        }
    }

最后需要注意的一点，ScrollView中嵌套WebView时滑倒会有冲突，需要特殊处理（目前还没研究处理方法。）今天的这篇文章就介绍这么多，所介绍的实例中，只提供了核心代码，如果想查看全部代码可以访问GitHub,由于认知有限，若有错误的地方欢迎指出，共同进步，谢谢。

上一篇下一篇

猜你喜欢

热点阅读