「ReactでTodoアプリを作ってみよう」の感想・備忘録3

posted with ヨメレバ

Amazonで見る

Kindleで見る

「ReactでTodoアプリを作ってみよう」の感想・備忘録2

posted with ヨメレバAmazonで見るKindleで見る 「ReactでTodoアプリを作ってみよう」の感想・忘備録1の続き TODOアプリの作成 1つのコンポーネントで実装 create-react-app todo cd todo; npm install react-router-dom App.jsを修正 import React from 'react'; export de...

ageo-soft.info

2020.10.12

Cordovaのインストール

Cordovaを使うと、ReactアプリをiOS, Androidで実行することができる。

1. npm install cordova
2. cordova create myapp
3. cd myapp; cordova platform add browser
   ※スマホアプリの場合はbrowserではなくiosやandroidを指定する
4. cordova run browserで実行

Cordovaプラグイン

カメラや位置情報を利用するには、Cordovaプラグインをインストールする必要がある。
https://cordova.apache.org/docs/en/latest/guide/support/index.html

Deviceプラグインのサンプル

1. cordova plugin add cordova-plugin-device
2. myapp/www/js/index.jsのonDeviceReadyメソッドに追記
   alert(`model:${device.model}, platform:${device.platform}`);

Cordovaを使ってAndroidでHTML・JavaScriptを表示・実行する

事前にAndroid SDKのインストールとPathの設定が必要。

• Android SDK
  Android Studio(IntelliJ IDEA)の設定⇒languages⇒Androidでインストール可能。
  ※ cordova platform add androidで作成されるbuild.gradleに必要なSDKバージョンの記載あり。
• Path設定https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

1. cordova create cordova-android; cd cordova-android;
2. cordova platform add android
3. wwwフォルダにhtmlとjsを格納
   イベントハンドラの登録はonDeviceReadyイベント内で行う必要がある(デフォルトのindex.jsに定義あり)
4. config.xmlを修正
   <widget id="io.cordova.todoapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>TodoApp</name>
5. cordova run androidで実行

Cordovaを使ってAndroidでReactアプリを実行する

Reactアプリの作成

1. create-react-app todo-on-cordova
2. cd todo-on-cordova; npm install react-router-dom
3. ReactアプリをCordovaで動かすには以下が2つが必要。
   ※ pakage.jsonに”homepage”: “./”,を追加
   ※ルーティングはHashRouterを使う
4. npm run build

Cordovaでandroidアプリの作成

1. cordova create cordova-todo
2. cd cordova-todo; cordova platform add android
3. Reactアプリのbuildディレクトリ配下をwwwディレクトリにコピー
4. androidプロジェクトを作成し、ADVマネージャからエミュレータを起動
5. cordova run android