2018年3月12日

WebViewを使ってみる【これからはじめるReact Native】

はじめに

前回はReact Nativeのアニメーションについて解説しました。

アニメーションをつける【これからはじめるReact Native】

今回はWebViewコンポーネントについてご紹介します。

WebViewとはその名前の通り、Webページとして表示できるコンポーネントです。
例えばメディアアプリでよくある構成として、記事一覧ページをサーバからAPI経由で取得し、記事の詳細ページはAPIから取得したURLを元にWebView表示するというものがあります。

また、利用規約や外部リンクを表示したいケースなどはWebViewを使用することが多く、とても重宝するコンポーネントです。

POINT!!

以前はiOSでもWebViewのみ、また構成の大部分をWebViewが占めるアプリが多く存在しました。
例えばメディアアプリやYouTubeなどの動画まとめアプリなども多くありました。
しかし、それでは実態としてはあまりWebサイトと変わりませんね。またそのアプリの外からWebに出てしまうことで安全性の担保が取れないなどの理由もあります。
そこでAppleはリジェクト（審査却下）の強化を行い、最近ではアプリの構成要素としてWebViewが主なアプリはリジェクトされる可能性が高くなってきました。

WebViewを使ってみる

では、実際にWebViewを使用してみましょう。

完成イメージとしてはこちらです！
といっても、bageleeをWebViewで表示しただけです。

こちらを実現しているのはこんなシンプルなソースコードです。

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

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

とてもシンプルなコードですが、解説していきます。

import { WebView } from 'react-native';

こちらでWebViewコンポーネントをインポートしています。

      <WebView
        source={{uri: 'https://bagelee.com/'}}
        style={{marginTop: 20}}
      />

こちらでWebViewを表示させています。
source Propsのuriに表示したいサイトのURLを設定します。
当然こちらでuriを変更することで別のサイトが表示されます。

では、いくつかイベントを設定してみましょう。

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

export default class App extends Component {
  _onLoad() {
    console.log('onLoad');
  }
  _onLoadEnd() {
    console.log('onLoadEnd');
  }
  _onLoadStart() {
    console.log('onLoadStart');
  }

  render() {
    return (
      <WebView
        source={{uri: 'https://bagelee.com/'}}
        style={{marginTop: 20}}
        onLoad={this._onLoad}
        onLoadEnd={this._onLoadEnd}
        onLoadStart={this._onLoadStart}
      />
    );
  }
}

onLoad~ というPropsはローディング時のイベントを発動します。
ここではログを出力しています。

ちなみにExpoのログはExpoの左下の画面で確認できます。