[ReactNative] WebViewからpostMessageで値をアプリに渡す
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);
}}
/>
);
}
Author And Source
この問題について([ReactNative] WebViewからpostMessageで値をアプリに渡す), 我々は、より多くの情報をここで見つけました https://qiita.com/atukuri/items/878b24274c2402e42bda著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .