我正在开发一个项目，需要将数据（特别是陀螺仪数据）从 React Native 应用程序发送到在 WebView 内呈现的 React 应用程序。然而，我在成功传输这些数据时遇到了困难。为简单起见，我想首先发送一个字符串并能够在我的 React 应用程序中访问它。
我尝试过的：
我有一个 React Native 应用程序，应该将数据发送到 React 应用程序。 React 应用程序加载到 React Native 应用程序的 WebView 中。 我尝试使用 React Native 中的 postMessage 并监听 React 应用程序中的消息。但由于某种原因，我无法在我的 React 应用程序中找到并使用这些数据。 React 应用程序似乎没有收到消息/数据。我无法在 React 应用程序端看到任何日志或数据更新。
我是否遗漏了将数据从 React Native 发送到 WebView 的方式？ 是否需要特定的步骤或配置来启用 React Native 和 WebView 之间的通信？ 使用 postMessage 实现此目的是否存在任何已知问题或限制？
反应本机代码：
const webViewRef = React.useRef<WebView>(null);
return (
<SafeAreaView style={styles.flexContainer}>
<WebView
ref={webViewRef}
source={{ uri: 'http://localhost:3000/' }}
startInLoadingState
javaScriptEnabled
allowsInlineMediaPlayback
style={styles.flexContainer}
onLoadEnd={() => webViewRef?.current?.postMessage("Hello")}
/>
</SafeAreaView>
);
};
这是我的 React 代码：
import React, { useState, useEffect, useRef } from 'react';
import './HolographicCard.css';
declare global {
interface Window {
ReactNativeWebView: {
postMessage(message: string): void;
};
}
}
const HolographicCard = () => {
const webViewRef = useRef<HTMLDivElement>(null);
useEffect(() => {
// Listen for messages from the WebView
const messageListener = (event: MessageEvent) => {
console.log('Message from WebView:', event.data);
};
window.addEventListener('message', messageListener);
return () => {
window.removeEventListener('message', messageListener);
};
}, []);
async function navigateBackToApp() {
window.ReactNativeWebView.postMessage('navigateBack');
}
return (
<div className="card-container">
<div className={`holographic-part`} ref={webViewRef}>
{/* ... other content ... */}
</div>
<button className="success-button" onClick={navigateBackToApp}>
Return
</button>
</div>
);
};
export default HolographicCard;
使用
injectJavaScriptpostMessageexport default App = () => {
const html = `<html style="height: 100%;">
<body style="height: 100%;">
<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
<button id="button">Send to RN</button>
</div>
<script>
document.getElementById("button").addEventListener("click", postMessage);
function postMessage() {
window.ReactNativeWebView.postMessage("Hello from HTML!")
}
function receiveMessage(message) {
alert(message)
}
</script>
</body>
</html>`;
const webref = useRef(null);
const postMessage = (message) => {
webref.current.injectJavaScript(`receiveMessage('${message}'); true;`);
};
const receiveMessage = (message) => {
console.log(message);
};
return (
<View style={{ flex: 1 }}>
<WebView
ref={webref}
source={{ html }}
onMessage={(event) => receiveMessage(event.nativeEvent.data)}
/>
<Button
title="Send to web"
onPress={() => postMessage('Hello from RN!')}
/>
</View>
);
};
详情请参见JS与Native之间的通信。