WebView

WebViewでJavaScriptを実行する方法【React Native】

今回はReact NativeのWebViewでJavaScriptを実行して見ます。

これを行うことで、モバイルアプリでもWebページでDOM操作などを行うことが可能となります。

React Nativeについては以下の記事で簡単な導入を解説しています。

React Nativeで始めるモバイルアプリ開発【初心者向け】

 

WebViewとは

WebViewとは、モバイルアプリ内でWebページを表示するための枠のようなものです。

通常スマートフォンでWebページを開く場合は、ブラウザなどで開く必要がありますが、WebViewを利用することでアプリ内にいながら任意のWebページを表示することができます。

WebViewでは以下のようにしてURLを指定することでWebページを表示することができます。

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

export default class App extends Component {
  render() {
    return (
        <WebView 
              source={{uri: 'https://student-engineer.net'}}
        /> 
    );
  }
}

アプリでの表示は以下のようになります。

WebView1

JavaScriptを実行する

WebViewでJavaScriptを実行するには、injectedjavascript属性でJavaScriptのコードを渡すことで実現できます。

今回は、上部のスライダーを削除してみました。

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

export default class App extends Component {
  render() {
    return (
      <WebView
            source={{uri: 'https://student-engineer.net'}}
            injectedJavaScript={js}
       />
    );
  }
}

const js = `
const slider = document.getElementById('slider');
slider.parentNode.removeChild(slider);
`;

アプリでの表示は以下のようになります。

webview2

WebViewでは、他にも読み込み完了時に発生するonLoadEndなど多くのオプションがあるので、Webサイトと関連したアプリを作る際は是非活用していただけると良いと思います。

Webview – React Native