2018.06.11[Cordova] Create React AppとCordova でアプリ環境を作る

Create React Appで作成したWeb Appを、Cordovaでアプリ化したい場合の環境を構築します。
macOS上でmyappと言う名前でアプリ環境を作ってみたいと思います。
Create React AppやCordova、Xcode等の環境はすでに出来ていることとします。

Reactでmyappを作成

$ create-react-app myapp

React環境がmyappディレクトリに作られます。
こちらの環境にCordova環境を統合させていきます。

Cordovaでmyapp-corvodaを作成

$ cordova create myapp-cordova com.example.myapp MyApp

Cordova環境がmyapp-cordovaディレクトリに作られます。

React環境にCordova環境を統合

myapp-cordovaから必要なファイルをmyappにコピーします。
必要なファイルは config.xml のみです。

$ cp -p myapp-cordova/config.xml myapp

myapp-cordovaディレクトリはもう不要です。

Reactのビルド先とCordovaの生成元を合わせる

Reactはbuildディレクトリにコードを吐き出し、Cordovaはwwwディレクトリのコードを元に生成します。なので、シンボリックリンクを作り場所を一致させます。

$ cd myapp
$ ln -s build www

Create React Appで作った環境をejectするならシンボリックリンクではなく、config/paths.jsのappBuild: resolveApp(‘build’)をresolveApp(‘www’)に変更しても良いです。

package.jsonを修正

以下の行を”name”: “myapp”,の直後に追加します。

"homepage": ".",

src/index.jsを修正

Cordova上の場合は、デバイスの準備が出来てから動かすように変更します。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

const startApp = () => {
  ReactDOM.render(<App />, document.getElementById('root'));
  registerServiceWorker();
}

if (window.cordova) {
  document.addEventListener('deviceready', () => {
    startApp();
  }, false);
} else {
  startApp();
}

public/index.htmlを修正

Cordova APIを使用する場合は、cordova.jsを読み込む必要があります。
</body>の直前に以下を追加します。

<script type="text/javascript" src="cordova.js"></script>

ビルド後、Cordovaのアプリプラットフォームを追加

必要に応じて、iosまたはandroidを追加してください。
(1度ビルドしないと追加できません)

$ yarn build
$ cordova platform add ios
$ cordova platform add android

これで環境構築は終了です。
Welcome to Reactの画面が出るか試してみましょう。

$ cordova run ios