「React Native」でWebVewを使う

「React」で作ったWEBサービススマホアプリ化してみる。

手書きのカタカナを認識するWEBサービス「カタカナ道場」

https://katakanadojo.tokyo

「React」のバージョン
react@^16.12.0:
  version "16.12.0"

Getting Startedの手順にならい、「React Native」をインストールする。

npm install -g expo-cli

「React Native」のバージョンは「0.61.4」
(yarn.lockより)

"react-native@https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz":
  version "0.61.4"

(package.jsonより)

  "dependencies": {
    "expo": "~36.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
  },

スマホ側のネイティブの「WebView」を呼び出せる「react-native-webview」コンポーネントがあるので、まず、これを使ってみる。

github.com

docs.expo.io

react-native-webview provides a WebView component that renders web content in a native view.

Expoプロジェクトを作り、

expo init AwesomeProject

パッケージを追加する。

expo install react-native-webview

「App.js」を以下のとおり変更。

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

export default class App extends React.Component {
  render() {
    return <WebView source={{ uri: 'https://katakanadojo.tokyo' }} style={{ marginTop: 20 }} />;
  }
}

Android Emulator」を起動し、expoを実行。

yarn start

シミュレータ上で、WEBページが表示された。
f:id:theatermask:20200201123359p:plain

下の画面で、白枠のところはHTMLのcanvasを使っており、マウスイベントとタッチイベントを拾うようにしているのだが、反応しなかった。
f:id:theatermask:20200201123531p:plain

ここまで確認していて、「ネイティブ化する必要があるのか?」という疑問が生じたので、一旦はここまでにする。