今回は、React Native で WebView を実装する方法についてです。
私は「react-native-webview」というライブラリを使いました。
GitHub のページはこちら。
GitHub – react-native-webview/react-native-webview: React Native Cross-Platform WebView
https://github.com/react-native-webview/react-native-webview
シンプルでわかりやすいライブラリなのでおすすめです。
ライブラリのインストールは下記のコマンドで行います。
npm install --save react-native-webview // iOS の場合は下記も実行 npx pod-install
上記が終わったら準備は完了です。
あとは、WebView を実装したいページに下記のように記述していきます。
import { WebView } from 'react-native-webview';
<WebView
source={{ uri: '開きたい Web ページの URL' }}
scalesPageToFit={false}
onLoadEnd={() => this.setState({ isLoading: false })} />
なお、Android の場合は scalesPageToFit={false} を追加しておくことをお勧めします。
こちらは Web コンテンツを画面に合わせて拡大縮小するかどうかを制御できるのですが、こちらの値が true だと、ページの文字サイズが小さくなってしまいとても見にくかったです。
もちろん、表示する Web ページによっては、デフォルト値の true でも問題ない場合があると思いますが、もしコンテンツが小さすぎて見にくい時はこちらをお試しください。
また、上記コードでは読み込みが完了した時に実行される onLoadEnd も定義しています。
読み込みが完了したら state の isLoading の値を false にし、読み込み中のローディングアイコンを非表示にするという処理を行なっています。
実際に実装して思ったのですが、個人的にやはりローディングアイコンはあったほうが良いです。
読み込み中など、今何をしているのかがわかる状態の方が、読み込みが終わるまで待てるような気がします。
なお、他にも使用できる API リファレンスの一覧はこちらから確認できます。
react-native-webview/Reference.md at master · react-native-webview/react-native-webview · GitHub
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md
今回は実装しませんでしたが、pullToRefreshEnabled という、iOS でページを引っ張ってリロードを有効にすることもできます。
他にも 位置情報を有効にする geolocationEnabled やユーザーエージェントを指定したりもできるので、一度ご確認ください。
以上、React Native の「react-native-webview」ライブラリを使って WebView を実装する方法についてでした。
ご参考になれば幸いです。
