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