, ,

Ionic + React + CapacitorでiOSアプリ開発の準備手順

ionicのtabsで作成

コマンドを叩いてtabsフォーマットで作成する。

ionic start myApp tabs

Capacitorと競合するため、CordovaのSplashscreen Pluginを削除します。

npm uninstall --save cordova-plugin-splashscreen

Capacitorのインストール

Capacitorをインストール。

npm i --save @capacitor/cli @capacitor/core

初期設定として、「capacitor.config.ts」ファイルにてアプリ名、アプリIDを設定する。

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'jp.example.appid',
  appName: 'AppName',
  webDir: 'dist',
  server: {
    androidScheme: 'https'
  }
};

export default config;

プラットフォームをインストール

iOSとAndroidをインストールする。

npm i @capacitor/android @capacitor/ios

iOSとAndroidを追加する。

npx cap add ios
npx cap add android

シミュレーションでiOSを動かす

ビルドする。

ionic build

ファイルをコピーする。

npx cap copy

シミュレーションでチェックする。

npx cap run ios
npx cap run android