What
- ReactNative+expoのアプリでWebViewを扱う際に、WebViewから値を直接アプリに渡したい場合の方法です
expoを使用している場合、WebViewを扱うためにはreact-native-webviewをimportする必要があります。
以下、WebViewから値を渡すサンプル
setInterval(function () {window.ReactNativeWebView.postMessage("Hello!")}, 2000)
webViewからアプリに値を渡したい場合、postMessageを使用しますが、注意点として、ReactNativeWebViewを対象にしないと正しく値が渡されないので注意。
アプリ側では、onMessageによって取得したeventからevent.nativeEvent.dataを参照する事で、postMessageの内容を見る事が出来ます。
import { WebView } from "react-native-webview";
function PostMessageExample(props) {
const html = `
<html>
<head></head>
<body>
<h1>hoge</h1>
<script>
setInterval(function () {
window.ReactNativeWebView.postMessage("Hello!")
}, 2000)
</script>
</body>
</html>
`;
return (
<WebView
source={{ html }}
onMessage={event => {
console.log(event.nativeEvent.data);
}}
/>
);
}