「React Native」でWebVewを使う
「React」で作ったWEBサービスをスマホアプリ化してみる。
手書きのカタカナを認識するWEBサービス「カタカナ道場」
「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」コンポーネントがあるので、まず、これを使ってみる。
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ページが表示された。
下の画面で、白枠のところはHTMLのcanvasを使っており、マウスイベントとタッチイベントを拾うようにしているのだが、反応しなかった。
ここまで確認していて、「ネイティブ化する必要があるのか?」という疑問が生じたので、一旦はここまでにする。