ReactNative WebView组件详解

源码传送门

react-native-webview-plugin插件

在开发Android的时候，通常咱们会有一些加载网页的需求，或者执行一些JavaScript，咱们都知道在Android中实现这个功能的控件是WebView,在ReactNative中也有实现此类需求额的组件，它的名字也是WebView。那么今天的这篇文章就来详细说说在ReactNative 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表示是否要继续执行响应的请求 #实战分析 经过上面的介绍，咱们已经对组件的属性以及函数有了大体的了解，固然只有这些是不够的，接下来就该组件的使用展开分析，效果图如文章开头的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,因为认知有限，如有错误的地方欢迎指出，共同进步，谢谢。

最后补充：

ReactNative WebView实现Android端图片和视频的拍摄和选择，以及ios，android根据webView内容自动设置高度（WebView嵌套在ScrollView中问题），修复如今Android端WebView偶先的闪退bug，插件地址github.com/xiehui999/r…