一、介绍
RNWebview是React Native框架中内置的可以呈现网页内容的组件,基于iOS UIWebView和Android WebView实现,支持一些基础的属性和方法,开发者可以通过RNWebview在React Native应用展示各类Web页面。
二、使用方法
在React Native项目中使用RNWebview,需要先进行组件的引入。在代码中导入一下语句:
{
import { WebView } from 'react-native-webview';
}
使用Webview组件需要用该组件包裹在View容器内,然后将Webview组件中URL参数,就可以将页面显示出来,下面是一个简单的例子:
{
import React, { Component } from 'react';
import {
WebView,
View,
} from 'react-native';
class MyWeb extends Component {
render() {
return (
);
}
}
}
三、常见属性参数
WebView组件支持许多属性,下面列出一些常见的属性参数:
1、source
定义要加载的网页的URL地址或html文本内容。源可以是字符串,也可以是包含HTML代码的对象,也可以是一个包含uri属性的对象。下面是不同类型的源:
{
source={{ uri: 'https://www.baidu.com' }}
source={{ html: 'Hello world
' }}
source={{ uri: 'file:///sdcard/some-local-file.html' }}
}
2、onLoad
在组件渲染时会触发onLoad回调函数,传递事件对象event、document.readyState、uri三个参数。该事件只触发一次,当所有的帧被加载完毕时,才会被触发回调函数,下面是一个例子:
{
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class ExampleApp extends Component {
onLoad(event) {
console.log(event.nativeEvent)
}
render() {
return (
)
}
}
}
3、onMessage
在Webview中通过JavaScript的postMessage方法可以向RN发送消息。可以在组件中使用onMessage回调函数捕获这些事件,并取得传进的数据,下面是一个例子:
{
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class ExampleApp extends Component {
onMessage(event) {
console.log(event.nativeEvent.data)
}
render() {
return (
)
}
}
}
四、常见方法
除了属性参数,WebView组件还支持一些方法,下面是一些常见的方法示例:
1、网页加载方法
通过ref属性获取组件引用,然后调用navigate方法实现URL的跳转。下面是一个例子:
{
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class ExampleApp extends Component {
webview = null;
runScript(){
if (this.webview){
this.webview.injectJavaScript('alert("This is Alert show!");')
}
}
render() {
return (
2、网页注入JS方法
通过ref属性获取组件引用,然后调用injectJavaScript方法可以注入JS脚本到网页中。下面是一个例子:
{
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class ExampleApp extends Component {
webview = null;
runScript(){
if (this.webview){
this.webview.injectJavaScript('alert("This is Alert show!");')
}
}
render() {
return (
3、网页后退方法
通过ref属性获取组件引用,然后调用goBack方法实现网页后退操作。下面是一个例子:
{
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class ExampleApp extends Component {
webview = null;
goBack(){
if (this.webview){
this.webview.goBack()
}
}
render() {
return (
五、总结
本文从介绍,使用方法,常见属性参数,常见方法四个方面详细阐述了RNWebview的使用,综合各个方面的内容,我们可以在React Native应用中快速、轻松地展示各类web页面内容,大大提高了React Native开发效率。