- アプリにブラウザやyoutubeのWebページを表示させたい
- webViewコンポーネントの実装方法を知りたい
と言う方に向けて記事を書いていきます。
本記事を読むことで、このように実装することができるようになります。
◯実装機能
・ブラウザ画面を表示
・ローディング画面を表示
・戻るボタン
・進むボタン
1. 概要
今回は、WebViewコンポーネントについて紹介していきます。
WebViewコンポーネントとは?
アプリにwebページ(ブラウザやyoutubeなど)を表示させることができるコンポーネントです。
公式ドキュメント: WebView
2. パッケージのインストール
前回までは、react-nativeからWebViewをインポートすることで、WebViewコンポーネントを使うことができていたのですが、現在は、react-native-webviewライブラリからインストールすることになりました。
以下のコマンドでreact-native-webviewライブラリをインストールします。
|
1 |
npm install --save react-native-webview |
本記事では、’react-native-elements’ライブラリを使って、ヘッダーを実装しますので、以下のコマンドを実行して’react-native-elements’ライブラリもインストールしてください。
|
1 |
npm install --save react-native-elements |
3. 使い方
3.1 インポート
‘react-native-webview’;ライブラリからWebViewコンポーネントをインポートします。
|
1 |
import { WebView } from 'react-native-webview'; |
3.2 サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import React, { Component } from 'react'; import { Header } from 'react-native-elements' import { View, ActivityIndicator } from 'react-native'; import Icon from 'react-native-vector-icons/FontAwesome5'; import { WebView } from 'react-native-webview'; export default class App extends Component { // ローディング画面 loading = () => { return <ActivityIndicator style={{ flex: 1, bottom: "30%" }} color='hsla(0, 100%, 50%, 0.9)' size='large' /> } render() { return ( <View style={{ flex: 1 }}> {/* --- ヘッダー --- */} <Header centerComponent={{ text: 'WebView', style: { color: 'lightblue', fontSize: 24, fontFamily: 'Baskerville-Bold', } }} leftComponent={ <Icon name="chevron-left" size={20} color="white" style={{ marginLeft: 5 }} onPress={() => this.webView.goBack()} /> } rightComponent={ <Icon name="chevron-right" size={20} color="white" style={{ marginRight: 5 }} onPress={() => this.webView.goForward()} /> } backgroundColor="black" barStyle="light-content" /> {/* --- WebView --- */} <WebView ref={ref => this.webView = ref} source={{ uri: 'https://www.google.com' }} renderLoading={() => this.loading()} startInLoadingState={true} /> </View> ); } } |
4. サンプルコードについて解説
まず、WebViewコンポーネントのプロパティ、メソッドについて一部紹介します。
4.1 WebViewコンポーネント
プロパティ及びメソッド
WebViewコンポーネント
WebViewコンポーネントのプロパティとメソッドについて一部紹介していきます。主に以下に記載してある情報を使うことで、ブラウザを表示、イベント設定することができます。
プロパティ
| source | uriを指定することで指定したページを表示することができる |
| style | ブラウザ表示画面のスタイル |
| startInLoadingState | WebViewが最初のロードでロードビューを強制的に表示するブール値。 |
| renderLoading | 読み込みインジケーターを返す関数。startInLoadingStateにTrueを設定する必要あり |
メソッド
| goForward() | Webビューの履歴で1ページ進む |
| goBack() | Webビューの履歴で1ページ戻る |
| reload() | 現在のページを再読み込む |
| stopLoading() | 現在のページの読み込みを停止する |
もっと詳しく知りたいと言う方は、以下に公式ドキュメントのリンクを貼っておきますので、そちらをご覧ください。
公式付ドキュメント：WebView
次に機能について以下の順で解説していきます。
- Webページの表示
- ローディング画面
- 戻るボタン
- 進むボタン
4.2 Webページの表示
Webページの表示は、 sourceプロパティに表示させたいURLを設定するだけで、表示させることができます。
|
1 2 3 |
<WebView source={{uri: 'https://www.google.com'}} /> |
4.3 ローディング画面
アプリでローディングに時間のかかる際、ユーザーにローディング中であることを知らせる為にローディング画面を表示させます。
ActivityIndicatorコンポーネント
ActivityIndicatorコンポーネントを使うことでローディング画面を実装することができます。公式ドキュメント：ActivityIndicator
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
・・・ export default class App extends Component { // ローディング画面 loading = () => { return <ActivityIndicator style={{ flex: 1, bottom: "30%" }} color='hsla(0, 100%, 50%, 0.9)' size='large' /> } ・・・ <WebView ・・・ renderLoading={() => this.loading()} startInLoadingState={true} /> ・・・ |
＜WebView＞コンポーネントの
renderLoadingプロパティに＜ActivityIndicator＞コンポーネントを設定することで、読み込み中にローディング画面を表示することができます。
※ただし、renderLoadingプロパティを使うときは、startInLoadingStateプロパティを”true”にする必要があります。
4.4 戻るボタン
戻るボタンを実装する為には、
WebViewのrefとgoBack()メソッドを紐付ける
ことで実装することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<Header ・・・ leftComponent={ <Icon name="chevron-left" size={20} color="white" style={{ marginLeft: 5 }} onPress={() => this.webView.goBack()} /> } ・・・ /> {/* --- WebView --- */} <WebView ref={ref => this.webView = ref} ・・・ /> |
4.5 進むボタン
進むボタンを実装する為には、
WebViewのrefとgoForward()メソッドを紐付ける
ことで実装することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<Header ・・・ rightComponent={ <Icon name="chevron-right" size={20} color="white" style={{ marginRight: 5 }} onPress={() => this.webView.goForward()} /> } ・・・ /> {/* --- WebView --- */} <WebView ref={ref => this.webView = ref} ・・・ /> |
5. まとめ
今回は、WebViewを使ってWebページの表示方法について紹介しました。
Webページは、WebViewコンポーネントを使うことで簡単に表示させることができますのでオススメのコンポーネントです。
