RN WebView详解

一、概述

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={() => }
    />

这里有一些可用的属性：

• 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
    

2. 导入新添加的WebView组件

        import WebView from 'react-native-webview';
    

3. 在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}
        />
    

2. 添加onMessage回调

        <WebView
            source={{uri: 'https://www.google.com'}}
            style={styles.webview}
            javaScriptEnabled={true}
            onMessage={this._onMessage}
        />
    

3. 添加_onMessage方法

        _onMessage(event) {
            console.log(event.nativeEvent.data); // 打印从WebView中传递过来的数据
        }
    

4. 在Web页面中发送消息。可以在Web页面中使用window.postMessage()方法来向React Native发送消息。以下是一个示例：

        window.postMessage('Hello from WebView!');
    

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

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

1. 在Web页面中注入原生代码。可以使用WebView的注入JavaScript属性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);
            `}
        />
    

2. 使用onMessage回调来处理从WebView中传递过来的数据

        _onMessage(event) {
            console.log(JSON.parse(event.nativeEvent.data)); // 打印从WebView中传递过来的数据
        }
    

3. 在原生代码中使用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。