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。