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
// 网页加载完成前，主动调用这段代码，向网页注入js。
injectedjavaScript={alert('aaa')}
// 在网页加载之后，调用js
injectedjavaScript={document.querySelector('#aaa').style.display='none'}onMessage和postMessage
通过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：安卓端也需要一个通用的方法，方便原生端可以进行一些记录和操作。
实际上双方就是互要接口
