前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布

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)的良好依赖。

代码语言:javascript
复制
# 新版本无需带版本号
yarn add react-native-webview@5.12.1 
react-native link reac-native-webview

使用也特别简单:

代码语言:javascript
复制
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
代码语言:javascript
复制
// 网页加载完成前,主动调用这段代码,向网页注入js。
injectedjavaScript={alert('aaa')}

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

通过ref来调用

实例:加载本地网页

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

代码语言:javascript
复制
<!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代码这么写:

代码语言:javascript
复制
<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>
混合开发实践

安卓发了一份文档给web前端的你,如下:

h5端需要做以下事情:

试问怎么看懂?

先了解安卓和web混合开发的沟通:

  • 安卓:我想要你对网页做什么交互,给我接口
  • web前端:我想要调用设备端功能,给我接口

明确了这两点,文档理解起来就容易了。

1:bbgamefunction是web前端可以调用的(通过communicate),需要告诉他做什么,怎么做(配置)

2:安卓端也需要一个通用的方法,方便原生端可以进行一些记录和操作。

实际上双方就是互要接口

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-09-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 一Li小麦 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • webview和h5交互与通信
  • 实例:加载本地网页
  • 混合开发实践
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档