react-native-webview
もともとはReact NativeのWebViewだったが、外部ライブラリになったっぽい
戻るボタンとかは、自作する必要がある
RNとWebViewでやりとりをする
code:ts
const onWebViewMessage = (e: WebViewMessageEvent) =>{
console.log(e.nativeEvent.data) // "Hello"を取得
}
const script = `
window.ReactNativeWebView.postMessage("Hello") // webviewから"Helllo"を送信
`
<WebView
onMessage={onWebViewMessage}
injectedJavaScript={script}
/>
これ、適当に書いているので、合っているかわからんmrsekut.icon
injectedJavascriptで文字列のJSを指定
その中で、window.ReactNativeWebView.postMessage("Hello!")を呼ぶことで、webView→RNへ"Hello"を送信できる
そのタイミングでRN側では、onMesssageに指定したハンドラが呼ばれる
ここではonWebViewMessae
expo-web-browserは、アプリの上にブラウザを開いている感じ
react-native-webviewはアプリの中に埋め込んでいる感じ
やろうと思えばボトムタブとかも表示させたまま、googleのページを表示したりできる
iframeにちかい