Building Mobile Apps with React and Capacitor

このチュートリアルでは、まず新しい React app and transition to native mobile development using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.

Capacitor allows you to easily convert your React web application into a native mobile app without significant modifications or learning a new skill like React Native.

Capacitorを使用することで、Reactアプリをモバイルアプリに変換することができます。

This tutorial will guide you through the process, starting with a new React app and then incorporating Capacitor to move into the realm of native mobile apps. You can also use Capgo Native Navigation, Transitions, and tailwind-capacitor for safe areas.

About Capacitor

Capacitorはゲームチェンジャーです! どのWebプロジェクトでも容易にCapacitorを組み込むことができ、WebアプリケーションをネイティブのWebビューにラップし、ネイティブのXcodeとAndroid Studioプロジェクトを生成します。また、プラグインはカメラなどのネイティブデバイス機能にアクセスするためのJSブリッジを提供します。

With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!

Reactアプリを準備する

このチュートリアルでは、最もシンプルな方法でReactアプリケーションを始めましょう。

npx create-react-app my-app

nativeモバイルアプリを作成するには、プロジェクトのエクスポートが必要です。 export package.jsonに、プロジェクトをビルドしてエクスポートするための簡単なスクリプトを追加します。 問題なく実行できます。プロジェクトのルートディレクトリに新しいフォルダが表示されます。 このフォルダは後で__CAPGO_KEEP_0__によって使用されますが、現在は正しく設定する必要があります。

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

__CAPGO_KEEP_0__をReactアプリに追加する npm run build Webアプリをnativeモバイルコンテナにパッケージ化するには、初期ステップを実行する必要がありますが、その後は単一のコマンドを実行するだけです。

This folder will be used by Capacitor later on, but for now, we must set it up correctly.

Adding Capacitor to Your React App

package.jsonに、プロジェクトをビルドしてエクスポートするための簡単なスクリプトを追加します。 sync 問題なく実行できます。プロジェクトのルートディレクトリに新しいフォルダが表示されます。

まず、開発依存として Capacitor CLI をプロジェクト内にセットアップすることができます。セットアップの際、デフォルトの名前とバンドルIDの値を「Enter」で受け入れることができます。

次に、iOSとAndroidプラットフォーム用の関連パッケージをインストールする必要があります。

最後に、プラットフォームを追加し、Capacitorはプロジェクトのルートディレクトリに各プラットフォーム用のフォルダを作成します:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your React project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

この時点で、 ios と android フォルダがReactプロジェクト内に表示されるはずです。

これらは実際のネイティブプロジェクトです!

Androidプロジェクトにアクセスするには、 Android Studio. iOSではMacが必要で、Xcodeをインストールする必要があります。 Xcode.

さらに、プロジェクト内で capacitor.config.ts file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the webDirという設定のみです。この設定は、現在は不正確です。

この不正確さを直すには、 capacitor.config.json ファイルを開き、 webDir:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "out",
  "bundledWebRuntime": false
}

CapgoでReactモバイルアプリを作成する方法

npm run build
npx cap sync

以下のコマンドを実行してみてください。 npm run build 最初のコマンド

は、Reactプロジェクトを単にビルドし、静的ビルドをエクスポートします。 npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

は、Web __CAPGO_KEEP_0__をネイティブプラットフォームの正しい場所にSyncします。 Syncコマンドは、ネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、新しいCapacitorプラグインをインストールした場合、再度実行する必要があります。 気づかなければならないことなく、実際には完了しています。 npx cap sync アプリをデバイスで表示してみましょう。

ネイティブアプリをビルドしてデプロイする

iOSアプリを開発するには、

Capacitor Xcode がインストールされている場合、Androidアプリの場合は Android Studio がインストールされている必要があります。また、App Storeでアプリを配布する場合、iOSの場合はApple Developer Programに、Androidの場合はGoogle Play Consoleに登録する必要があります。

native mobile開発の新人ですか? Capacitor CLI を使用すると、両方のネイティブプロジェクトを簡単に開くことができます。

npx cap open ios
npx cap open android

ネイティブプロジェクトを設定した後、実機にアプリをデプロイするのは簡単です。Android Studioでは、設定を変更することなく実機にアプリをデプロイすることができます。例えば、

Xcodeでは、実機にアプリをデプロイするには署名アカウントを設定する必要があります。実機にアプリをデプロイするのではなく、シミュレータにのみアプリをデプロイする場合は、設定を変更する必要はありません。署名アカウントを設定する必要がある場合は、Xcodeがガイドを提供します (ただし、開発者プログラムに登録する必要があります)。署名アカウントを設定した後、実機にアプリをデプロイするには、上部で実機を選択して、実行をクリックするだけです。例えば、

成功しました! React Webアプリをモバイルデバイスにデプロイしました。例えば、

しかし、開発中にはもっと速い方法があります…

Capacitor Live Reload

現在、すべてのモダンフレームワークでホットリロードができるようになっているので、同じ機能をモバイルデバイスでも利用できるようになります。 モバイルデバイスでも 最小限の手間で!

ローカルホストのアプリケーションにアクセスし、ライブリロードを有効にするには、__CAPGO_KEEP_0__ アプリが特定のURLからコンテンツを読み込むように設定する必要があります。 ローカルIPアドレスを確認する必要があります。Macを使用している場合は、ターミナルで以下のコマンドを実行して確認できます。 by having the Capacitor app load the content from the specific URL.

次に、IPv4アドレスを探します。

ipconfig getifaddr en0

__CAPGO_KEEP_0__ をサーバーから直接アプリを読み込ませるには、ファイルに別のエントリを追加する必要があります:

ipconfig

__CAPGO_KEEP_0__

Capacitor capacitor.config.ts __CAPGO_KEEP_0__

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

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'out',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:3000',
    cleartext: true
  }
};

export default config;

Capgoを使用する際には 正しいIPアドレスとポート番号を使用してくださいこの例では、デフォルトのReactポートを使用しています。

ここから、変更を適用することができます。

npx cap copy

このコマンドは copy と似ていますが、 syncWebフォルダと設定のみをコピーし、ネイティブプロジェクトを更新せずにします。 Android StudioまたはXcodeを使用してアプリを再度デプロイしてください。 あなたがReactアプリで何かを変更した場合、

アプリは自動的に再読み込みされ 変更が表示されます! and show the changes!

ご注意 新しいプラグインをインストールした場合、カメラなどの場合、ネイティブプロジェクトを再構築する必要があります。これは、ネイティブファイルが変更されたため、オンザフライで行うことはできません。

注意してください。正しいIPアドレスとポート番号を設定する必要があります。上記のcodeブロックは、デモ用にデフォルトのReactポートを示しています。

Capacitor プラグインの使用

実際に使用する Capacitor プラグインについては、実際に使用する方法をご紹介します。簡単なプラグインをインストールするには、以下のコマンドを実行します。

npm i @capacitor/share

Share プラグインは何も特別なことはありませんが、ネイティブの共有ダイアログを表示します! このため、パッケージをインポートし、関数を呼び出すだけです。アプリのsrc/App.jsを次のように変更します。前述のように、新しいプラグインをインストールした場合、Sync操作を行い、再度アプリをデバイスにデプロイする必要があります。以下のコマンドを実行してください。 share() __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__

import React from 'react';
import { Share } from '@capacitor/share';

function App() {
  const share = async () => {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends'
    });
  };

  return (
    <div>
      <h1>Welcome to React and Capacitor!</h1>
      <p>
        <h2>Cool channel</h2>
        <button onClick={() => share()}>Share now!</button>
      </p>
    </div>
  );
}

export default App;

__CAPGO_KEEP_0__

npx cap sync

ボタンを押した後、素晴らしいネイティブシェアダイアログが実行されます!

次に、iOSとAndroidでネイティブのCapgoナビゲーションとトランジションを使用してアプリをよりネイティブに感じさせ、水平オーバーフローまたは安全エリアがカットされたiOSの一般的なレイアウト問題を修正できます。

ネイティブフィーリングのUIとCapgoネイティブナビゲーションとトランジション

数年間、Ionicを使用してクロスプラットフォームアプリケーションを構築してきましたが、Reactと統合することはハック的で、すでにTailwind CSSを持っている場合にはほとんど価値がありません。 Ionic Tailwind CSS React + __CAPGO_KEEP_0__アプリケーションでネイティブモバイルフィーリングを実現するには、WebのみのUIキットであるKonsta UIではなく、__CAPGO_KEEP_1__プラグインを使用します。.

@Capacitor/Capgo-native-navigation

• @capgo/capacitor-native-navigation @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions
• @capgo/capacitor-transitions — WebViewレイヤーで、Ionicスタイルのページ遷移とiOSのエッジスワイプバックを実現する。Ionic UIを採用する必要はありません。

両方をインストールする:

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

ネイティブナビゲーションをCSSのインセットモードで設定して、ウェブコンテンツがネイティブバーを尊重するようにします:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

液体ガラススタイルのタブバーをレンダリングします (iOSはシステム所有のレンダリングを使用し、AndroidはぼやけたWebViewのバックグラウンドを使用します):

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  navigate(`/${id}`);
});

アプリシェルでネイティブページ遷移を追加します:

import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/react';

initTransitions({ platform: 'auto' });

export function AppShell() {
  const navigate = useNavigate();
  const outletRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (outletRef.current) {
      setupRouterOutlet(outletRef.current, { platform: 'auto', swipeGesture: 'auto' });
    }
  }, []);

  const openSettings = () => {
    setDirection('forward');
    navigate('/settings');
  };

  return <cap-router-outlet ref={outletRef}>{/* routes */}</cap-router-outlet>;
}

ルーティングされたページを cap-router-outlet, cap-page、 cap-content、 setDirection('forward') または呼び出します。 setDirection('back') または

context Using @capgo/capacitor-native-navigation と @capgo/capacitor-transitions.

セーフエリア

デバイスのセーフエリアをTailwind CSSで使用するには @capgo/tailwind-capacitor (公開日 tailwind-capacitor npmで safe-areas 機能やその他のCapacitor対応のTailwindプラグインを提供します

bun add -D tailwind-capacitor

In src/index.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

機能を使用する pt-safe, pb-safe、 px-safe 代わりに env(safe-area-inset-*) 手作り。プロジェクトは積極的に開発されています — ご自身のReact設定で何かが欠けている場合、 GitHubにPRを提出してください.

iOSレイアウトの修正 (ビュー ポート、セーフ エリア、水平オーバーフロー)

iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできる場合、ビュー ポートタグを追加したり修正したりするだけでは通常解決しません。順序に従ってこれらのチェックを実行してください。 overflow-x: hidden ビュー ポートメタタグが正しく適用されていることを確認してください

ビュー ポートメタタグを追加してください

内側 index.html iOSセーフエリアを1つのルートラッパーからのみ取り扱ってください <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

単一のアプリシェルを作成し、セーフエリアのパディングをそこに適用してください — 複数のネストされたコンポーネントに適用するのではなく:

すべてのページコンテンツを

html,
body,
#root {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

セーフエリアのパディングが複製されたヘッダー、モーダル、レイアウトラッパーは、UIが切り取られたり大きすぎるように見えることがよくあります。 .app-shellセーフエリアのパディングが複製されたヘッダー、モーダル、レイアウトラッパーは、UIが切り取られたり大きすぎるように見えることがよくあります。

With @capgo/tailwind-capacitor, you can express the same padding with utilities like pt-safe pb-safe px-safe on that single shell.

Capacitor iOS contentInset を never first

In capacitor.config.ts, native の inset を disabled にし、CSS (または Native Navigation の ) が safe area を管理するようにします。 contentInsetMode: 'css'__CAPGO_KEEP_0__の自動的なコンテンツインセットとCSSのパディングを組み合わせると、ダブルスペースの原因となることがよくあります。

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'dist',
  ios: {
    contentInset: 'never',
  },
};

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) padding is a common cause of double spacing.

実際のオーバーフロー要素を見つける

通常の容疑者は、固定ピクセル幅の要素を使用している 100vw, Tailwind w-screen, 固定ピクセル幅の要素、または大きい min-width.

Safari Web インスペクターで実行:

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Tailwindの場合、 w-screen を置き換える w-full 可能な限り 100vw / w-screen水平方向のオーバーフロー問題の多くは、

、安全エリアの重複したパディング、または固定幅のコンテナから来ています — ではなく、ビュー ポート メタタグ自体から

Capacitor is an excellent option for building native applications based on an existing web project, offering a simple way to share code and maintain a consistent UI.

__CAPGO_KEEP_0__は既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションであり、__CAPGO_KEEP_1__を共有し、UIの統一性を維持する簡単な方法を提供します。 Capgo最新の機能やバグ修正を常に利用できるように、リアルタイムの更新を追加することができます。

If you would like to learn how to add Capgo to your React app, take a look at the next article:

Keep going from Building Mobile Apps with React and Capacitor

Capacitorを使用している場合 Building Mobile Apps with React and Capacitor CI/CDの自動化を計画するには、Capacitor CI/CDに接続してください。 Capgo CI/CD for the product workflow in Capgo CI/CD, Capgo Native Builds for the product workflow in Capgo Native Builds, Capgo Integrations Capacitor製品ワークフローにおけるCapgo統合 CI/CD統合 CI/CD統合の実装詳細については GitHubアクション統合 実装詳細についてはGitHubアクション統合