[ReactNative]WebViewでアプリとWebで値をやりとりする。
WebViewを使いたいので調査
やりたいことはWebViewから値をもらって、それをアプリにわたす。
逆にアプリからWebView側に値を渡すということ。
コンポーネントの情報
※バージョンとか注意..
App→webViewで値を渡す
①injectedJavaScriptでjsコードを渡す。
WebViewのpropsにinjectedJavaScriptがあり、これは文字列でJsのコードを渡すとweb側で実行してくれる。
以下 Googleを表示してフォームに文字列をセットするサンプル。
export default class Sample extends React.Component<Props, State> {
message = "hello world"
js = `
const inputs = document.getElementsByName("q")
inputs[0].value = "${this.message}"
`
render() {
return (
<WebView
source={{uri:'https://www.google.co.jp/'}}
injectedJavaScript={this.js}
></WebView>
)
}
②postMessage()を使う
App->WebViewでもpostMessageはできそうだけど、こっちはなんか面倒くさそうなので割愛。jsコードを渡せればなWeb側で実行する関数を定義しておいてくれれば、それに引数を渡して実行できるしね
WebView→Appで値を渡す
HTML側で実行するpostMessage()の呼び出し方が変わっている。自分のreact-nativeのバージョンに合わせて変更。
//Web側で動かすスクリプト
window.postMessage('OK'); //0.59はこっちでうごく
window.ReactNativeWebView.postMessage("OK"); //最新はこっちみたい
さらに、iOSは上記の記述でよかったのだけど、アンドロイドで上記をinjectしたらonMessageが反応しなかった。
setTimeoutで囲ったらうまくいったので、最終的に動いたコードは以下のようになった。
//App側
js= `
setTimeout( function(){window.postMessage("ok") }, 0 )
`
onMessage = (event) => {
const {data} = event.nativeEvent
alert(data)
}
render() {
return (
<WebView
source={{uri:'http://example.co.jp/'}}
injectedJavaScript={this.js}
onMessage={this.onMessage}
/>
)
}
これでWeb側のpostMessage()が実行されたときに、WebViewのonMessageに設定した処理が動く。
参考リンク
Author And Source
この問題について([ReactNative]WebViewでアプリとWebで値をやりとりする。), 我々は、より多くの情報をここで見つけました https://qiita.com/Takuya-Nakamura/items/7e4aab9c296d3d44b848著者帰属:元の著者の情報は、元の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 .