【React Native】アプリからブラウザを起動させるWebViewコンポーネント

WebViewコンポーネントを使うことで、アプリ上からブラウザを起動して任意のWebページを表示させることができる。

react-native-webviewのインストール

以前まではreact-nativeからWebViewをインポートすることができていたのだが、現在はreact-nativeからWebViewが削除されたため、新たにreact-native-webviewをインストールする必要がある。

npm i react-native-webview

上記コマンドをプロジェクトルートで実行する。

WebViewコンポーネントのインポート

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

WebViewコンポーネントの基本的な使い方

まず、sourceにWebサイトのURLを指定する。

次に必ず必要なのがサイズの指定。
style属性で絶対値を使って厳密にサイズ指定をするか、scalesPageToFitにtrueを設定しないとコンポーネントを表示することができない。

今回はscalesPageToFit属性を使って画面幅いっぱいにコンポーネントを表示させることにした。

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

export default class App extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://chusotsu-program.com/'}}
        style={{marginTop: 20}}
        scalesPageToFit={true}
      />
    );
  }
}

Expoを使った確認の際は必ず実機で確認を行うようにする。

WebViewはアプリ上でのブラウザ表示なので、PCブラウザだとコンポーネントが表示されないのだ。