WebViewコンポーネント内で関数を作成し、ネイティブ関数をトリガーすることは可能ですか?React Native - Webview呼び出しネイティブ関数に反応する
答えて
これは可能ですが、これを行う唯一の方法であるかどうかはわかりません。
基本的には、onNavigationStateChange
イベントハンドラを設定し、関数呼び出し情報をナビゲーションURLに埋め込むことができます。ここではその概念の例を示します。
では
render() {
return <WebView onNavigationStateChange={this._onURLChanged.bind(this)} />
}
_onURLChanged(e) {
// allow normal the natvigation
if(!e.url.startsWith('native://'))
return true
var payload = JSON.parse(e.url.replace('native://', ''))
switch(e.functionName) {
case 'toast' :
native_toast(e.data)
break
case 'camera' :
native_take_picture(e.data)
break
}
// return false to prevent webview navitate to the location of e.url
return false
}
はただのWebViewのナビゲーションイベントをトリガし、これを使用して、ネイティブメソッドを呼び出すには、ネイティブコンテキストを反応させ、URL内の関数呼び出し情報を埋め込みます。
window.location = 'native://' + JSON.stringify({
functionName : 'toast', data : 'show toast text'
})
はい、可能ですが、それはreact-native-webview-bridgeのパッケージに存在します。 私はそれを生産に多量に使用しました。
こんにちはSidali Hallakさん、ネイティブバージョンuを使用して反応しますか?私は0.30を使用しており、それをインストールしているからです。それはこの問題の原因ですhttps://github.com/alinz/react-native-webview-bridge/issues/137 – ChokYeeFan
私は0.25を使用していました、私は2ヶ月前にプロジェクトを終了しました –
あなたは、私はわからないが、私の意見はある負荷にWebViewのにJavaScript関数を注入した後、あなたはより多くの情報IN Here
を注入された機能からの応答を得るためのonMessageを使用することができます -
することができますない。 Webviewは、Webviewコンポーネントで定義できるjsパーツだけを読み込むことができます。これは他のコンポーネントとはまったく別物であり、可視領域にすぎません。
- 1. 反応ネイティブの他のコンポーネントから関数を呼び出す
- 2. opneUrl反応ネイティブの呼び出し、mailto
- 3. ネイティブWebViewエラー "_onLoadingStart"に反応します
- 4. react-native - 引数として関数を呼び出す
- 5. 別の関数内のネイティブの問題を呼び出す関数に反応しますか?
- 6. ネイティブFlatListに反応する - コンポーネントを返すレンダリングメソッドで関数を呼び出す
- 7. カスタムコンポーネントからのネイティブReact-nativeの呼び出し
- 8. インポートでネイティブ呼び出しコンポーネントに反応するjs
- 9. React native JsコードからAndroidネイティブUIコンポーネントメソッドを呼び出す
- 10. 反応ネイティブ画面を開くときに関数を呼び出す
- 11. 反応するネイティブfirebaseでfirebase.app()を呼び出す目的は何ですか?
- 12. Javascriptアラートがアンドロイドで反応しない反応ネイティブwebview
- 13. onRegionChangeComplete関数は、ネイティブの反応マップを使用して複数回呼び出す
- 14. 異なる反応ファイルから関数を呼び出す
- 15. ネイティブ呼び出しに反応します。android java classのコンストラクタ
- 16. Aurelia jsで反応し、aurelia関数を呼び出します。
- 17. Reactネイティブ、AwesomeProject、反応ネイティブrun-ios:** BUILD FAILED **
- 18. React nativeのナビゲーションバーから関数を呼び出す方法は?
- 19. React Nativeの親コンポーネントから子関数を呼び出す
- 20. React Native in Insideコールバック関数のthis.setState()を呼び出す
- 21. 反応しないネイティブhtml postMessageはWebViewに届きません
- 22. React Native - double ListViews関数呼び出し時に同時にレンダリングする
- 23. ネイティブWebViewハンドリングアンドロイドハードウェアボタンに反応します
- 24. クラスを関数ネイティブで関数呼び出しとして呼び出すことができません
- 25. アンドロイドでバックグラウンドタスクをスケジュールし、反応からネイティブなjavascriptメソッドを呼び出す
- 26. AndroidでNativeに反応し、フェッチでAJAX呼び出しが失敗する
- 27. Reactネイティブのネイティブコンポーネント関数を呼び出す
- 28. Rails 5.1に反応するReactコンポーネントにデータベースオブジェクトを呼び出す
- 29. d3とwebViewでネイティブに反応する
- 30. React-nativeおよび反応の依存関係の競合
達成したいことは何ですか? Reactネイティブは、ネイティブのアンドロイドまたはios APIを使用して、Reactネイティブでアプリケーションを構築するのに力を入れている強力です。 WebViewを使用せずに達成するには、他にも良い方法がいくつかあります。 –
あなたの必要条件をより具体的にすることができます –