react-native-webview 的使用
RN升级到0.61.5之后，webview从react native官方api中删除，官方推荐采用react-native-webview.
一、react-native-webview 网上安装教程大都是坑，正确安装组件步骤如下:
1.npm install --save react-native-webview
2.项目目录下
cd ios //进入ios目录
pod install //拉去项目的pod依赖
3.react-native link react-native-webview 或者yarn react-native link react-native-webview
二、webview 与 h5之间的通信 示例代码如下（看明白就懂了）
App.js代码如下：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component} from 'react';
import { StyleSheet, View, Text, Dimensions,Alert,TextInput,TouchableOpacity,KeyboardAvoidingView} from "react-native";
import { WebView } from "react-native-webview";
// Dimensions 用于获取设备宽、高、分辨率
const { width, height } = Dimensions.get("window");
export default class myapp extends Component {
constructor() {
super();
this.state = {
value:''
}
}
render() {
return (
<View style={styles.container}>
<WebView
//source={{html: './test.html'}}
ref={webview => this.webview = webview}
javaScriptEnabled={true}
source={require('./test.html')}
style={{marginTop: 20}}
originWhitelist={['*']}
onLoadStart={() => {
// Alert.alert('On load event','start');
}}
onLoadEnd={() => {
}}
onNavigationStateChange={this._onNavigationStateChange}
onMessage={(event)=>{
const data = event.nativeEvent.data
this.handleMessage(data);
}}
/>
<KeyboardAvoidingView behavior="padding"
style={styles.commentContain} >
<TextInput
placeholder="请输入评论内容"
editable={true}//是否可编辑
onChangeText={this.getValue.bind(this)}
value={this.state.value}
style={styles.commentInputStyle}//input框的基本样式
/>
<TouchableOpacity style={styles.buttonStyle}>
<Text onPress={()=>this.buttonClick()}>发送</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
);
}
pageLoadEnd(){
Alert.alert('On load event End','load');
}
buttonClick(){
//h5加载完后 向H5发送一些上传图片需要的其它字段比如token id等等
this.webview.postMessage(this.state.value);
}
_onNavigationStateChange = (navState) => {
console.log(navState)
this.setState({
backButtonEnabled: navState.canGoBack,
forwardButtonEnabled: navState.canGoForward,
url: navState.url,
status: navState.title,
loading: navState.loading,
});
}
handleMessage(str){
alert(str);
}
getValue(text){
this.setState({
value:text
});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
marginTop: 44
},
commentContain:{
flexDirection: 'row',
backgroundColor: '#fff000',
height: 64,
width: width,
alignItems: 'center',
paddingLeft: 15,
paddingRight: 15
},
keyContain:{
flex: 1,
},
commentInputStyle:{
flex: 1,
borderWidth: 1,
height: 44,
},
buttonStyle:{
marginLeft: 10,
width: 64,
height: 44,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 1,
borderRadius: 20
}
});
test.html代码如下：
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
body{
font-size: 22px;
}
.btn{
margin-top: 100px;
width:250px;
height: 120px;
font-size: 38px;
}
</style>
</head>
<body>
<p>北京6月30日下午召开新型冠状病毒肺炎疫情防控工作新闻发布会。北京市疾病预防控制中心副主任庞星火介绍，近日，隔离人员中陆续出现了多例隔离期间发生症状不报告的情况，部分患者因症状轻微未报告。</p>
<p>庞星火提醒，新冠肺炎病毒致病机理复杂，疾病特征有待进一步研究。症状多样、不典型，不易引起重视。当前疫情防控形势依然严峻，切不能掉以轻心，日常要做好个人防护，关注健康状况，出现不适症状要全程做好防护及时就医。集中隔离、居家隔离人员请严格按照隔离要求，调整心态，坚持做到不外出，每日检测报告体温，出现任何身体不适均要及时报告，按要求就诊；配合做好检验检测和环境消毒。</p>
<p>
<div>评论如下：</div>
<div id='comment'>
</div>
<button id='send' type="button" class="btn">h5 to rn</button>
</p>
</body>
<script type="text/javascript">
window.onload = function() {
window.addEventListener("message", function(event) {
document.getElementById("comment").innerText=event.data;
});
}
var sendBtn=document.getElementById("send");
sendBtn.addEventListener('click', function(){
window.ReactNativeWebView.postMessage("h5 to rn")
}, false);
</script>
</html>
作者留言：知识需要慢慢积累，人生需要脚踏实地。