webview

一粒小麦

发布于 2019-09-17 16:59:31

1.7K0

发布于 2019-09-17 16:59:31

文章被收录于专栏：一Li小麦

webview是对rn开发的一个重要补充，由于性能原因，旧版自带的webview即将被移除。

官方改为推荐react-native-webview，它也是新版本（0.60-0.62）的良好依赖。

# 新版本无需带版本号
yarn add react-native-webview@5.12.1 
react-native link reac-native-webview

使用也特别简单：

import {Webview} from 'react-native-webview';

export default class MyPage extends Component{
    render(){
        return (
            <WebView
                source={{ uri: "https://infinite.red/react-native" }}
                style={{ marginTop: 20 }}
                onLoadProgress={e => console.log(e.nativeEvent.progress)}
            ></WebView>
        )       
    }
}

webview和h5交互与通信

注入js

// 网页加载完成前，主动调用这段代码，向网页注入js。
injectedjavaScript={alert('aaa')}

// 在网页加载之后，调用js
injectedjavaScript={document.querySelector('#aaa').style.display='none'}

onMessage和 postMessage

通过ref来调用

实例：加载本地网页

不妨在项目中写一个本地的html，实践一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webview</title>
</head>
<style type="text/css">
#app{
    height: 100vh;
}
</style>
<body>
    <div id="app">
        <h1 class="title">原生网页</h1>
    </div>
    <script>
        // 直接调用js：
        alert('hello');

        // 接收来自rn的信息
        window.onmessage=(e)=>{
            alert(e.data)
        };

        // 向rn发送消息
        window.ReactNativeWebView.postMessage('向rn发送消息');

    </script>
</body>
</html>

Rn代码这么写：

<WebView
    source={ require('./webview.html') }
    style={{ marginTop: 20 }}
    // injectedJavaScript={`document.querySelector('#app').style.display="none"`}
    // injectJavaScript={`alert("aaa")`}

        // 加载进度
    onLoadProgress={e => console.log(e.nativeEvent.progress)}

    ref={(e)=>{
        this.webview=e;
    }}

    onLoadEnd={()=>{
        this.webview.postMessage('来自rn的信息')
    }}

    onMessage={(e)=>{
        console.log(e.nativeEvent.data)
    }}
></WebView>