React入門

【ReactNative編】Webviewを使ってメディアアプリを作ろう

【ReactNative編】Webviewを使ってメディアアプリを作ろう

前回まででReactNativeの環境構築は終わりました。

まだ終わっていない方は下記の記事を参考にしてみてください

【入門】ReactNative+Expo環境構築|firebaseとの連携も解説
【入門】ReactNative+Expo環境構築|firebaseとの連携も解説ReactNativeをExpoを使ってビルドや開発する方法などを掲載しています。firebaseとの連携や実際にビルドする方法なども掲載予定...

本記事ではReactNativeのWebviewコンポーネントについて詳しく解説していきます。

WebviewコンポーネントではWebページを表示することができるコンポーネントです。
具体的には、ニュースアプリなどでよく使用されています。多くの場合は利用規約や外部リンクの記事を表示させたいときに使用されます。

数年前まではiOSやAndroidなどでWebviewコンポーネントを活用したアプリが多かったです。具体的にはニュースアプリ、動画まとめサイトなどで多く使用されていました。
しかし、現在はAppleリジェクト(審査却下)の対象となってしまい、利用率は格段に下がりました。
おにちゃん塾でもAppleリジェクトを受け、今後は段階的に使用率を下げていきます。現状はかなり使用しています。

Webviewの完成品【ReactNative】

まとめ:ReactNative×Webviewの使い方

Webviewの完成品【ReactNative】

本記事で紹介するコードを記述するだけで、上記の完成品を表示させることができます。

おにちゃん
おにちゃん

おにちゃん塾のトップページが表示されています。

 

WebViewのコードを詳しく解説

WebViewのコードを詳しく解説

WebViewのコードを詳しく解説

完成品のようなアプリを開発したい場合は下記のコードを入力する必要があります。

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

export function WebviewScreen () {
  return(
     <WebView
     source={{uri:
      'https://onityanzyuku.com'}}
      style={{marginTop: 20}}
     />
  )
}

 

おにちゃん
おにちゃん

これだけ!?って思いますよね。たったこれだけでWebサイトをアプリにすることができます。

難しいコードは一つもありませんね。

注意点としては、Webviewは初期状態ではインポートされていないので、自分でインポートする必要があります。

昔はReact-Nativeにインポートされていたみたいですが、近年は各々インストールするしかないみたいです。

npm install —save react-native-webview

react-native-webviewをインストールできた方はリンクさせていきましょう。

react-native link react-native-webview

これで依存関係をリンクすることができました。

 

ReactNativeについてもっと学びたい方向け

ReactNativeについてもっと学びたい方向け

おにちゃん塾の記事を参考にしてみてください。

React&ReactNativeに関する情報を沢山掲載しています。

【基礎入門】ReactNativeとは?環境構築からメモアプリまでを解説
【基礎入門】ReactNativeとは?環境構築からメモアプリまでを解説ReactNativeとはアプリ開発用のフレームワークです。本記事では基礎入門としてReactNativeの環境構築〜メモアプリまでを解説しています。...

書籍が好きな方は下記の本がおすすめです。


動画で学びたい方は下記の2つがおすすめです。

おにちゃん
おにちゃん

お金をかけたくない方はおにちゃん塾を参考にしてください。

 

まとめ:ReactNative×Webviewの使い方

まとめ:ReactNative×Webviewの使い方

まとめ:ReactNative×WebViewの使い方

ここまででWebviewを使ってメディアアプリを作ろう【ReactNative編】について詳しく解説してきました。

本記事のまとめ
  • Webviewとは、Webサイトを表示されるコンポーネント
  • コードは数行なのに、それなりのアプリが開発できる
  • ReactNative初心者の方におすすめ機能
おにちゃん
おにちゃん

本記事は以上です。

 

読者におすすめの記事

【デザイン】ReactNative Elementsで今風UIを構築してみよう
【デザイン】ReactNative Elementsで今風UIを構築してみようReact Native ElementsでカッコよいUIを構築する方法について詳しく解説しています。2021年はマテリアルデザインを意識すべし...
【React入門】Reactとは?UI構築のためのJSライブラリ
【React入門】Reactとは?UI構築のためのJSライブラリReact入門|Reactでの開発環境、todoアプリ、chatbotアプリなどを開発できるコンテンツ|日々更新しています。...
ABOUT ME
アバター
鬼澤龍平(20)
Twitterにて役立つ情報を掲載しております。
関連記事