今回は、Webページの状況によって、Reactnative側で処理を変更したい場合に、データを受け取る必要があるため、詳細を記載していく。
WebViewのライブラリーを用いて、以下のガイドラインを参考に進めていく。
Webpageからメッセージを送る
ディレクトリ・ファイル作成
最初にWebページを用意するために、以下のコマンドを入力します。
mkdir WebPage
cd WebPage
touch index.html
htmlファイルの変更
index.htmlに以下のコードを加えます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- ページのコンテンツ --> 省略
<h1>Webpage</h1>
<script>
if ('ReactNativeWebView' in window) {
const data = { type: 'example', message: 'Webページからメッセージを送っています' };
window.ReactNativeWebView.postMessage(JSON.stringify(data));
}
</script>
</body>
</html>
- Webpageが開かれた環境を判断するため、
'ReactNativeWebView' in windowを使用して、React Native WebViewが存在するかを確認しています - 存在する場合、
Webページからメッセージを送っていますという値を設定しています -
window.ReactNativeWebView.postMessage(JSON.stringify(data))を使用して、作成したデータをJSON文字列に変換し、WebView内のReact Nativeアプリにメッセージを送信しています
ローカルでWebサーバーを立ち上げる
Pythonのhttp.serverモジュールを用いて、ローカルで立ち上げる。
python3 -m http.server
出力結果
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
アクセスすると、
現在は文字が表示されているのみですが、ReactnativeでWebViewから、Webpageを表示した際にメッセージを送ることができます。
Reactnative側の実装
ReactNative側でデータを受け取り、Consoleに表示するまでを行っていく。
プロジェクトを作成します。
npx create-expo-app WebViewMessage
WebViewのパッケージをインストール
npx expo install react-native-webview
App.jsの実装
import { WebView } from 'react-native-webview';
const App = () => {
return (
<WebView
// ローカルで立ち上げたWebページのURLを指定
source={{ uri: 'http://localhost:8000/index.html' }}
onMessage={(event) => {
// メッセージを受信したときの処理をここで行います
const data = JSON.parse(event.nativeEvent.data);
console.log('Received message from webpage:', data.message);
}}
/>
);
}
export default App;
-
import { WebView } from 'react-native-webview';でWebViewコンポーネントをインポートしています -
WebViewコンポーネントを使って、指定したURL（
http://localhost:8000/index.html）のウェブページを表示しています。このウェブページは、React Nativeアプリ内でWebViewを介して表示されます -
onMessageプロパティを使用して、WebView内のウェブページからメッセージを受信するイベントハンドラを設定しています。ウェブページからメッセージが送信されると、このイベントハンドラが呼び出されます -
onMessageイベントハンドラ内では、受信したデータをJSON形式にパースし、console.logを使用してコンソールにメッセージを出力しています。これにより、ウェブページからのメッセージをアプリ内で処理できます
動作確認
iOSのシミュレーターを立ち上げた際に、
iOS Bundling complete 36ms (node_modules/expo/AppEntry.js)
LOG Received message from webpage: Webページからメッセージを送っています
と出力され、メッセージを受け取ることができました
以上になります。
最後に
他にも良い方法があれば、コメントいただけると大変うれしいです。
良かったと思ったら、いいねやTwitterのフォローよろしくお願いいたします！
個人でアプリを作成しているので、良かったら覗いてみてください！