おにちゃん塾の商品一覧

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

【ReactNative編】Webviewを使ってメディアアプリを作ろう
URLをコピーする
URLをコピーしました!

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

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

本記事では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に関する情報を沢山掲載しています。

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

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

おにちゃん

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


まとめ:ReactNative×Webviewの使い方

まとめ:ReactNative×Webviewの使い方
まとめ:ReactNative×WebViewの使い方

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

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

本記事は以上です。

読者におすすめの記事

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる