アプリ上からWEBサイトを組み込むことができれば色々カスタマイズできて便利ですよね？

本記事ではWebViewを用いたアプリ上でWEBサイトを組み込む方法について解説します．

WebViewとは？

React Nativeのコンポーネントで，アプリ上でWEBページを表示させることができます．

また，React Nativeで記述できないHTMLなども組み込めます．

WebViewの導入方法

npmを用いてインストールします．

タイトル:ターミナル

$ npm install react-native-webview

インストール後，以下のようにインポートを行うことで導入できます．

タイトル:App.js

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

WebViewの使い方

使い方についてですが，WEBサイトを表示する場合とHTMLを表示する場合に分けて解説します．

WEBサイトを表示する場合

WEBサイトを表示する場合は，以下のように記述します．

タイトル:App.js

<WebView source={{uri: WEBサイトのリンク('https://code-database.com/')}}/>

HTMLを表示する場合

HTMLを表示する場合は，以下のように記述します．HTMLを表示する場合は，originWhitelist={['*']}と記述してください．

タイトル:App.js

<WebView source={{ html: htmlのコード('<h1>Hello Code Database</h1>')
                   style=スタイル({styles.container})
                   originWhitelist={['*']}
}}/>

実装

それではWebViewを用いてWEBサイト表示を実装していきます．今回は，本サイトとYoutubeが同時に閲覧できるアプリを実装します．

ソースコード

タイトル:App.js

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

export default function App() {
  return (
    <View style={styles.container}>
      <WebView source={{uri: 'https://code-database.com/'}}/>
      <WebView source={{uri: 'https://www.youtube.com/'}}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop:"10%",
  },
});

結果

Code DatabaseのサイトとYouTubeが同時に閲覧することができました．

本記事のまとめ

• WebViewを使うことで，アプリ上でWEBサイトを表示することが可能に！
• うまく使えば，Youtubeを見ながらWEBサイトの閲覧できるアプリの開発が可能に！

今回はWebViewを用いた表示のみの解説でしたが，WEBページで戻るボタンなどの操作の部分を解説していきます．