React-Native开发总结-webview

我就是我 2022-06-03 01:58 210阅读 0赞

*最近更新时间：2017年12月14日19:36:11*

[《我的博客地图》][Link 1]

上学的时候希望尽早工作，融入社会，积累工作经验。工作之后才发现，工作永远干不完，而且每个项目都不一样，积累工作经验不是一时半会的事情，而是日积月累细心领悟的过程，因此，需要不断总结和积累所见所闻，保持学习，才能轻松驾驭工作。

在react native项目中，一方面使用RN技术进行APP开发，同时还能在APP中嵌套使用网页，是常见的业务需求。常见方案有三种：使用html文件、URI地址、html代码片段。

0、概述

import \{ WebView \} from 'react-native';

WebView组件，用于创建一个原生的WebView，可以用于访问一个网页；

1、HTML代码片段在WebView中的使用

html代码片段如下，html代码片段的内容可以是图文混编，来源于ajax接口返回的数据(string类型)：

let HTML = '';

<!DOCTYPE html>  
<html>  
    <head>  
        <title></title>  
        <meta charset="utf-8">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />  
        <style>  
            html \{  
                font-size: 20px;  
            \}  
            @media only screen and (min-width: 400px) \{  
                html \{  
                    font-size: 21.33333333px !important;  
                \}  
            \}  
            @media only screen and (min-width: 414px) \{  
                html \{  
                    font-size: 22.08px !important;  
                \}  
            \}  
            @media only screen and (min-width: 480px) \{  
                html \{  
                    font-size: 25.6px !important;  
                \}  
            \}  
            body \{  
                margin: 0;  
                padding: 1.5rem .8rem 1.5rem .8rem;  
                color: \#424242;  
                line-height: 26px;  
                font-size: .8rem;  
            \}  
            .content\{  
                font-size: .8rem;  
                line-height: 1.3rem;  
            \}  
            img \{  
                width: 100%;  
                display: block;  
                margin: .5rem 0;  
            \}  
            p\{  
                margin: 0;  
                padding: 0;  
            \}  
        </style>  
    </head>  
<body>  
    <div class="content">  
    <p>asdfasdf</p>  
    </div>  
</body>  
</html>

对HTML代码片段style样式适配(如：禁止长按触发)重置如下：

let arr = HTML.split("<style>");  
let disableSelect =\`\* \{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;\}\`  
if(arr.length > 1)\{  
    arr\[1\] = disableSelect + arr\[1\];  
    HTML = arr.join("<style>");  
\}

APP页面使用方法：

<WebView  
            ref=\{webview => \{this.webview = webview;\}\}  
            onError = \{()=>\{  
              ToastAndroid.show(\`加载失败，请重试！\`,ToastAndroid.SHORT,ToastAndroid.CENTER);  
              this.props.navigation.goBack()  
            \}\}  
            javaScriptEnabled=\{true\}  
            domStorageEnabled=\{true\}  
            onMessage=\{this.onMessage\}  
            source=\{ \{html: HTML\}\}

获取WebView组件实例的方法：

<WebView ref=\{webview => \{this.webview01 = webview;\}\} />

console.log(this.webview01);//对象内容如下

console.log(this.refs\[WEBVIEW01\_REF\]);//对象内容如下

2、uri地址在WebView中的使用

uri地址如下，uri的内容可以是PDF文件、doc文件，来源于ajax接口返回的数据(string类型)：

let uri = 'http://abc.com/aa/bb/cc=='

<WebView  
            source=\{ \{uri: uri\}\}

3、WebView组件实例详解

WebView组件实例是一个WebView对象，包括属性和方法，如下：

属性：context、props(domStorageEnabled、javaScriptEnabled、onError()、onMessage()、saveFormDataDisabled、scalesPageToFit、source:\{\}、thirdPartyCookiesEnabled、ref)、refs、state

方法：goBack()、goForward()、onLoadingError()、reloadd()、postMessage()......

使用：

this.refs\[WEBVIEW01\_REF\].onMessage();//在webview内部的网页中调用window.postMessage方法时可以触发此属性对应的函数，从而实现网页和RN之间的数据交换。 设置此属性的同时会在webview中注入一个postMessage的全局函数并覆盖可能已经存在的同名实现。

未完，待续...

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440