ReactNative进阶（十）：WebView 应用详解_react native webview_业界新闻

发布时间:2024-07-13 22:32

阅读量:1

2.1 通过 url 地址加载网页

import React, {Component} from 'react'; import {     AppRegistry,     StyleSheet,     Dimensions,     Text,     View,     WebView } from 'react-native';   //获取设备的宽度和高度 var {     height: deviceHeight,     width: deviceWidth } = Dimensions.get('window');   //默认应用的容器组件 class App extends Component {     //渲染     render() {         return (             <View style={styles.container}>               <WebView bounces={false}                 scalesPageToFit={true}                 source={{uri:"https://shq5785.blog.csdn.net/",method: 'GET'}}                 style={{width:deviceWidth, height:deviceHeight}}>               </WebView>             </View>         );     } }   //样式定义 const styles = StyleSheet.create({     container: {         flex: 1,         paddingTop:20     } });   AppRegistry.registerComponent('HelloWorld', () => App);

2.2 加载 html 代码

import React, {Component} from 'react'; import {     AppRegistry,     StyleSheet,     Dimensions,     Text,     View,     WebView } from 'react-native';   //获取设备的宽度和高度 var {     height: deviceHeight,     width: deviceWidth } = Dimensions.get('window');   //默认应用的容器组件 class App extends Component {   //渲染   render() {    return (        <View style={styles.container}>          <WebView bounces={false}            scalesPageToFit={true}            source={{html:"<h1 style='color:#ff0000'>欢迎访问 https://shq5785.blog.csdn.net/</h1>"}}            style={{width:deviceWidth, height:deviceHeight}}>          </WebView>        </View>    );   } }   //样式定义 const styles = StyleSheet.create({   container: {       flex: 1,       paddingTop:20   } });   AppRegistry.registerComponent('HelloWorld', () => App);

2.3 RN -> HTML5 通信

当WebView加载html时，可实现html和rn之间的通信。rn向html发送数据可以通过postMessage函数实现。如下：

 <WebView     ref={(view) => (this.webView = view)}     useWebKit={false}     onLoad={() => {       let data = {         name: userInfo.usrName       };       this.webView.postMessage(JSON.stringify(data));     }}     onError={(event) => {       console.log(`==webViewError:${JSON.stringify(event.nativeEvent)}`);     }}     onMessage={(event) => {       this.\_onH5Message(event);     }}     automaticallyAdjustContentInsets={false}     contentInset={{ top: 0, left: 0, bottom: -1, right: 0 }}     onScroll={(event) => this.\_onScroll(event)}     style={styles.webview}     source={this.html ? { html: this.html } : { uri: this.url }}     bounces={false}     showsHorizontalScrollIndicator={false}     showsVerticalScrollIndicator={false}   />

html

// 在html中注册事件接收rn发过来的数据并显示在html中 document.addEventListener('message', function listener(RnData) {   messagesReceivedFromReactNative += 1;   document.getElementsByTagName('p')[0].innerHTML =     '从React Native接收的消息: ' + messagesReceivedFromReactNative;   document.getElementsByTagName('p')[1].innerHTML = RnData.data;   // 获取接收后的数据后，及时清除监听器   document.removeEventListener('message', listener) });

在html中定义一个按钮，并添加事件向rn发送数据：

//window.postMessage向rn发送数据 document.getElementsByTagName('button')[0].addEventListener('click', function() {   window.postMessage('这是html发送到RN的消息'); });

当html中调用了window.postMessage函数后，WebView的onMessage函数将会被回调，用来处理html向rn发送的数据,可以通过e.nativeEvent.data获取发送过来的数据。

// 接收HTML发出的数据 _onH5Message = (e) => {   this.setState({       messagesReceivedFromWebView: this.state.messagesReceivedFromWebView + 1,       message: e.nativeEvent.data,   })   Alert.alert(e.nativeEvent.data) }

2.4 HTML5(Vue) -> RN 通信

HTML5

const message = {  flag: 'previewIamge'  filePath: filePath } window.ReactNativeWebView.postMessage(Json.stringify(message))

RN
还是通过WebView提供的onMessage 属性完成回调。

 <WebView     ref={(view) => (this.webView = view)}     useWebKit={false}     onLoad={() => {       let data = {         name: userInfo.usrName       };       this.webView.postMessage(JSON.stringify(data));     }}     onError={(event) => {       console.log(`==webViewError:${JSON.stringify(event.nativeEvent)}`);     }}     onMessage={(event) => {       this.\_onH5Message(event);     }}     automaticallyAdjustContentInsets={false}     contentInset={{ top: 0, left: 0, bottom: -1, right: 0 }}     onScroll={(event) => this.\_onScroll(event)}     style={styles.webview}     source={this.html ? { html: this.html } : { uri: this.url }}     bounces={false}     showsHorizontalScrollIndicator={false}     showsVerticalScrollIndicator={false}   />

回调函数_onH5Message()实现逻辑如下：

// 接收HTML发出的数据 _onH5Message = (e) => {   this.setState({       messagesReceivedFromWebView: this.state.messagesReceivedFromWebView + 1,       message: e.nativeEvent.data,   })   Alert.alert(e.nativeEvent.data) }