2018年3月12日
プログラミング
WebViewを使ってみる 【これからはじめる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の左下の画面で確認できます。
まとめ
シンプルな機能ですが、WebViewはアプリには欠かせないものです。
ですが、こちらをメインにしてしまうとAppleからはリジェクトされる可能性が高く、あくまでも補助的なものだと覚えておいてください。
この記事は
参考になりましたか?
0
0
関連記事

2018年12月6日
【React Native】キーボードで画面が隠れる場合の対処法

2018年7月13日
TypeScriptでReact Native開発をする方法2018年最新版

2018年6月29日
React Navigationのタブナビゲーションをカスタマイズしてみよう!

2018年6月19日
React Navigationでタブナビゲーションを作ろう!

2018年4月16日
ExpoのLocationで位置情報を取得する【これからはじめるReact Native】

2018年4月2日
MaskedViewIOSでマスクをかける 【これからはじめるReact Native】
eishisでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー

Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ デザイナー
WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。
Miu マーケター
ドイツでWEBマーケティングしています。
しんのき エンジニア
新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

やまかわたかし デザイナー
フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。
furuya エンジニア
サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
うえまつゆい エンジニア
サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。