ReactNative WebView 应用详解

举报
SHQ5785 发表于 2023/06/30 08:41:36 2023/06/30
【摘要】 一、WebView 组件介绍使用 WebView 组件可通过 url 来加载显示一个网页,也可以传入一段 html 代码来显示。下面对其主要属性和方法进行介绍。1. 主要属性source:在 WebView 中载入一段静态的 html 代码或是一个 url(还可以附带一些 header 选项);automaticallyAdjustContentInsets:设置是否自动调整内容。格式:b...

一、WebView 组件介绍

使用 WebView 组件可通过 url 来加载显示一个网页,也可以传入一段 html 代码来显示。下面对其主要属性和方法进行介绍。

1. 主要属性

  • source:在 WebView 中载入一段静态的 html 代码或是一个 url(还可以附带一些 header 选项);
  • automaticallyAdjustContentInsets:设置是否自动调整内容。格式:bool
  • contentInset:设置内容所占的尺寸大小。格式:{top:number,left:number,bottom:number,right:number};
  • injectJavaScript:当网页加载之前注入一段 js 代码。其值是字符串形式。
  • startInLoadingState:是否开启页面加载的状态,其值为 true 或者 false
  • bounces(仅iOS):回弹特性。默认为 true。如果设置为 false,则内容拉到底部或者头部都不回弹。
  • scalesPageToFit(仅iOS):用于设置网页是否缩放自适应到整个屏幕视图,以及用户是否可以改变缩放页面。
  • scrollEnabled(仅iOS):用于设置是否开启页面滚动。
  • domStorageEnabled(仅Android):用于控制是否开启 DOM Storage(存储)。
  • javaScriptEnabled(仅Android):是否开启 JavaScript,在 iOS 中的 WebView 是默认开启的。

2. 主要方法

  • onNavigationStateChange:当导航状态发生变化的时候调用。
  • onLoadStart:当网页开始加载的时候调用。
  • onError:当网页加载失败的时候调用。
  • onLoad:当网页加载结束的时候调用。
  • onLoadEnd:当网页加载结束调用,不管是成功还是失败。
  • renderLoadingWebView组件正在渲染页面时触发的函数,只有 startInLoadingStatetrue 时该函数才起作用。
  • renderError:监听渲染页面出错回调函数。
  • onShouldStartLoadWithRequest(仅iOS):该方法允许拦截 WebView 加载的 URL 地址,进行自定义处理。该方法通过返回 true 或者 false 来决定是否继续加载该拦截到请求。
  • onMessage:在webView内部网页中,调用window.postMessage可以触发此属性对应的函数,通过event.nativeEvent.data获取接收到的数据,实现网页和RN之间的数据传递。
  • injectJavaScript:函数接受一个字符串,该字符串将传递给WebView,并立即执行为JavaScript

二、WebView 使用样例

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时,可实现htmlrn之间的通信。rnhtml发送数据可以通过postMessage函数实现。如下:

RN

 <WebView
    ref={(view) => (this.webView = view)}
    useWebKit={false}
    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函数后,WebViewonMessage函数将会被回调,用来处理htmlrn发送的数据,可以通过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}
    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)
}

2.5 JavaScript 脚本注入

注:这种方式适用于 react-native-webviewRN本身没有试过)。

android开发中,需要使用 javaScriptEnabled属性来支持JavaScriptios默认是支持的,没有此属性。在WebView中提供了函数injectJavaScript(String),它有一个字符串参数,可以向webview中注入脚本,如下:

//脚本注入
injectJS = () => {
  const script = 'document.write("Injected JS ")';  // eslint-disable-line quotes
  if (this.webview) {
     this.webview.injectJavaScript(script);
  }
}

实现思路:通过injectJavaScript 注入JS ,在H5页面加载之后立即执行。相当于webview端主动调用H5的方法。

注意事项:injectJavaScript注入的必须是js。注入内容可以是方法实现,也可以是方法名字。

注意:

  • 注入函数名的时候,实际上注入的仍然是函数实现。
  • 当注入js方法名需要传递参数的时候,可提前将函数名作为字符串,函数参数作为变量,生成一个字符串,然后将此字符串注入。

RN端

首先Webview绑定 ref='webView'

H5调用一个名为 receiveMessage 的函数,并传入一个字符串, 参数true不可少

 <WebView
    ref={(view) => (this.webView = view)}
    useWebKit={false}
    useWebKit={false}
    onLoadEnd={() => {
      this.endLoad();
    }}
    ..
    />

//加载结束调用,不管是成功还是失败。  
endLoad(){   
   // 在H5调用一个名为 `receiveMessage` 的函数,并传入一个字符串,  参数true不可少        
   this.refs.webView.injectJavaScript(`receiveMessage("RN向H5发送消息");true;`)
}

H5端(Vue实现)

mounted中往 window 上添加一个方法(注意:不是监听,只是挂载);名为 receiveMessage (必须和RN端保持一致)。

mounted(){ 
  //在window上挂载一个receiveMessage方法,RN会调用
  window.receiveMessage = (msg) => {            
    alert( msg)
  }
},

三、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。