RN WebView详解

发布时间：2023-05-22

一、概述

RN WebView是React Native的核心组件之一，使我们能够在应用程序中显示Web内容，包括HTML、CSS和JavaScript。它提供了与原生WebView组件相同的功能，同时使得我们能够访问原生Web桥梁API，可以在React Native中使用它。 WebView提供了一个React Native组件来自适应移动设备的屏幕大小，以实现全屏沉浸式浏览体验。我们可以通过设置一些属性来配置WebView的外观和功能：

<WebView
    source={{ uri: 'https://www.yahoo.com' }}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    startInLoadingState={true}
    renderLoading={() => <Loading />}
/>

这里有一些可用的属性：

  • source: 加载的URL。
  • javaScriptEnabled: 是否允许WebView运行JavaScript代码。
  • domStorageEnabled: 是否启用本地DOM存储。
  • startInLoadingState: 是否在页面加载时显示加载状态。
  • renderLoading: 自定义用于渲染加载状态的组件。

二、使用WebView打开Web页面

我们可以在React Native应用程序中使用WebView打开Web页面，然后在应用程序中显示该页面。下面是具体步骤：

  1. 在React Native项目中安装RN WebView
npm install react-native-webview --save
  1. 导入新添加的WebView组件
import WebView from 'react-native-webview';
  1. 在render中添加WebView组件，并设置URL（source）
render() {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>WebView Example</Text>
            <WebView
                source={{uri: 'https://www.google.com'}}
                style={styles.webview}
            />
        </View>
    );
}

三、在WebView中运行JavaScript代码

WebView组件允许您在加载的Web页面上执行JavaScript代码。下面是具体步骤：

  1. 启用 javaScriptEnabled 属性
<WebView
    source={{uri: 'https://www.google.com'}}
    style={styles.webview}
    javaScriptEnabled={true}
/>
  1. 添加 onMessage 回调
<WebView
    source={{uri: 'https://www.google.com'}}
    style={styles.webview}
    javaScriptEnabled={true}
    onMessage={this._onMessage}
/>
  1. 添加 _onMessage 方法
_onMessage(event) {
    console.log(event.nativeEvent.data); // 打印从WebView中传递过来的数据
}
  1. 在Web页面中发送消息。可以在Web页面中使用 window.postMessage() 方法来向React Native发送消息。以下是一个示例：
window.postMessage('Hello from WebView!');

四、在WebView中使用本地桥梁API

WebView使应用程序能够访问本机Web桥梁API，以便使用一些原生功能，例如访问设备加速器、传感器等。下面是具体步骤：

  1. 在Web页面中注入原生代码。可以使用WebView的 injectJavaScript 属性注入原生代码。以下是一个示例：
<WebView
    source={{uri: 'https://www.google.com'}}
    style={styles.webview}
    javaScriptEnabled={true}
    onMessage={this._onMessage}
    injectedJavaScript={`
        setInterval(() => {
            window.postMessage(JSON.stringify({
                x: Math.random() * 10,
                y: Math.random() * 10
            }));
        }, 1000);
    `}
/>
  1. 使用 onMessage 回调来处理从WebView中传递过来的数据
_onMessage(event) {
    console.log(JSON.parse(event.nativeEvent.data)); // 打印从WebView中传递过来的数据
}
  1. 在原生代码中使用 WebViewBridge
import { WebView } from 'react-native-webview';
import { WebViewBridge } from 'react-native-webview-bridge';
const injectScript = `document.addEventListener('message', function(e) {
    window.postMessage(e.data);
});`;
// 准备好被注入的桥接代码
const patchPostMessageFunction = function() {
    var originalPostMessage = window.postMessage;
    var patchedPostMessage = function(message, targetOrigin, transfer) {
        originalPostMessage(message, targetOrigin, transfer);
    };
    patchedPostMessage.toString = function() {
        return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
    };
    window.postMessage = patchedPostMessage;
    document.dispatchEvent(new Event('message'));
};
export default class App extends Component {
    onMessage = (event) => {
        console.log(event.nativeEvent.data);
        // 打印从WebView中传递过来的数据
    }
    render() {
        return (
            <WebViewBridge
                ref="webviewbridge"
                injectedJavaScript={injectScript}
                onMessage={this.onMessage}
                source={{ uri: 'https://www.google.com' }}
            />
        );
    }
}

五、WebView优化建议

为了更好地使用WebView，以下是一些优化建议：

  • 避免在WebView中加载大量图像或视频，因为这样会占用大量内存。
  • 使用 shouldOverrideUrlLoading 回调来处理链接的打开方式。
  • 避免同时加载多个WebView实例，因为它们可能会互相影响并导致应用程序崩溃。
  • 避免在WebView中运行过多的JavaScript代码，因为这会消耗大量CPU资源。
  • 使用Chrome Devtools来调试WebView。
推荐文章