如何从React Native向React Native WebView传递Firebase Token？

要实现把Firebase Token传递给WebView，你需要调整代码，确保WebView实例已初始化且页面加载完成后再发送消息，具体步骤如下：

1. 创建WebView引用并发送Token #

首先通过useRef获取WebView实例，等待页面加载完成后调用postMessage传递Token：

import { useRef, useEffect } from 'react';
import { SafeAreaView } from 'react-native';
import WebView from 'react-native-webview';
import { messaging } from '@react-native-firebase/messaging';

const App = () => {
    const webviewRef = useRef(null);

    useEffect(() => {
        const getTokenAndSendToWebView = async () => {
            try {
                const token = await messaging().getToken();
                // 确保WebView已加载完成再发送消息
                const sendToken = () => {
                    webviewRef.current?.postMessage(token);
                };

                // 若WebView已加载，直接发送；否则监听加载完成事件
                if (webviewRef.current?.isLoading === false) {
                    sendToken();
                } else {
                    const handleLoadFinish = () => {
                        sendToken();
                        webviewRef.current?.removeEventListener('loadEnd', handleLoadFinish);
                    };
                    webviewRef.current?.addEventListener('loadEnd', handleLoadFinish);
                }
            } catch (error) {
                console.error('获取Firebase Token失败:', error);
            }
        };

        getTokenAndSendToWebView();
    }, []);

    return (
        <SafeAreaView style={{flex: 1}}>
            <WebView
                ref={webviewRef}
                startInLoadingState={true}
                source={{uri: 'http://myurl'}}
                javaScriptEnabled={true} // 确保JS功能开启
            />
        </SafeAreaView>
    );
};

2. 网页端接收Token #

在你的网页代码中，需要监听message事件来接收Native传递的Token：

// 网页端JS代码
window.addEventListener('message', (event) => {
    const firebaseToken = event.data;
    console.log('收到Native传递的Token:', firebaseToken);
    // 后续可将Token存入本地或发送给后端
});

常见问题排查 #

• 必须确保WebView的javaScriptEnabled设为true，否则无法接收消息。
• 不要在WebView未初始化完成时调用postMessage，这是你之前函数未执行的核心原因。
• 可以在getToken后打印Token，确认Firebase Token是否成功获取。

内容的提问来源于stack exchange，提问作者user19476497