react-native-webview 的使用

最新推荐文章于 2023-01-05 17:49:08 发布

天水一欢

最新推荐文章于 2023-01-05 17:49:08 发布

阅读量4.6k

点赞数 2

分类专栏：混合app

本文链接：https://blog.csdn.net/qq_40263927/article/details/107448686

版权

混合app 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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);
}}

/>

<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>

</p>

</body>

</script>

</html>

作者留言：知识需要慢慢积累，人生需要脚踏实地。

天水一欢

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
react-native-webview 的使用

RN升级到0.61.5之后，webview从react native官方api中删除，官方推荐采用react-native-webview.一、react-native-webview 网上安装教程大都是坑，正确安装组件步骤如下:1.npm install --save react-native-webview2.项目目录下cd ios //进入ios目录pod install //拉去项目的pod依赖3.react-native link react-native-webvi..
复制链接

扫一扫