Building Mobile Apps with Pure React.js and Capacitor

This tutorial will walk you through crafting a mobile application using React and Capacitor. By the end, you’ll know how to morph a React.js web app into a native mobile application with Capacitor, and add a native feel with Capgo Native Navigation and Transitions.

Capacitorは、React.jsのWebアプリをネイティブモバイルアプリに変換するための簡単な方法を提供します。React Nativeなどの新しい戦略を学ぶ必要はなく、Webアプリを大幅に変更する必要もありません。

このプロセスは、数ステップで行われ、React.jsアプリを完全に機能するモバイルアプリに変換します。ここで、我々があなたをこの旅に連れて行きます。

Capacitorの概要

CapacitorJSはゲームチェンジャーです。Webプロジェクトと組み合わせて、ネイティブのWebビューにアプリをラップし、ネイティブのXcodeとAndroid Studioプロジェクトを生成することができます。また、JSブリッジを使用してカメラなどのネイティブデバイス機能にアクセスすることもできます。

Capacitorは、ネイティブモバイルアプリを作成するための簡単な方法を提供します。APIとストリーミングされた機能により、プロジェクトに簡単に組み込むことができます。

React.jsアプリの設定

Reactアプリケーションを開始する最も簡単な方法を使用してみましょう。npmパッケージマネージャーを使用して、Reactアプリケーションを作成します:

npx create-react-app my-app

プロジェクトをネイティブモバイルアプリに変換するには、 export アプリの

この時点では戻ります。まず、Capacitor を React アプリに統合する方法を理解しましょう。

Capacitor を React.js アプリに統合する

初期設定の手順は少し詳細かもしれませんが、その後、ネイティブ アプリ ウォッパーを更新することは、コマンドを実行するだけの簡単な作業になります。 sync command.

First, we’ll install the Capacitor CLI as a development dependency and set it up within our project. During the setup, accept the default values for name and bundle ID by pressing “enter.”

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

Finally, we’ll add the platforms, and Capacitor will create folders for each platform at our project root:

# 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

と context and android Android のディレクトリは、現在あなたの React.js プロジェクトに存在します。

Android のプロジェクトにアクセスするには、以下の手順に従ってください。 Android Studio をインストールしてください。iOS の場合、Mac を使用し、Xcode をインストールしてください。 Xcode.

あなたの __CAPGO_KEEP_0__.config.json ファイルに示すように webDir あなたの capacitor.config.json Android Studio

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

Capacitor を使用して React アプリを構築する場合、Capacitor CLI を使用してプロジェクトを Capacitor と同期する必要があります。

npm run build
npx cap sync

The npm run build は npx cap sync ウェブ code を、ネイティブプラットフォームの正しい場所に合わせるので、ウェブ code をアプリ内で実行できるようにすることができます。

は、ウェブ__CAPGO_KEEP_0__を、ネイティブプラットフォームの正しい場所に配置するため、エラーが発生しない限り、実行可能なアプリとして実行できるようにします。

Native アプリの作成と配布

ビルドと展開するネイティブアプリ iOSアプリの開発にはXcode が必要です。Androidアプリの開発にはAndroid Studio

The Capacitor CLI simplifies the process of opening both native projects:

npx cap open ios
npx cap open android

Capgoは、両方のネイティブプロジェクトを開くプロセスを簡素化します:

Android Studioの場合、すべての内容が読み込まれたら、実機にアプリを展開してください。

Xcodeの場合、実機にアプリを展開するには署名アカウントを設定する必要があります。署名アカウントを設定した後、上部で選択した実機にアプリを展開するには、単に「実行」をクリックしてください。

すべてがうまくいけば、React.jsのWebアプリをネイティブモバイルアプリに変換することができます!

Capacitor ライブ リロード

モダンな開発フレームワークは通常、ホットリロード機能を備えています。幸いにも、Capacitorでも同じことが可能です。 __CAPGO_KEEP_0__はモバイルデバイス上で実行されます。!

ローカルホストのアプリケーションにライブリロード機能を付与するには、Capacitorアプリが特定のURLからコンテンツを読み込むように設定する必要があります。

最初に、ローカルIPアドレスを決定してください。Macの場合、ターミナルで実行してください。 ipconfig getifaddr en0 Windowsの場合、実行してIPv4アドレスを確認してください。 ipconfig この後、__CAPGO_KEEP_0__アプリにサーバーから直接アプリを読み込むように指示するには、ファイルにパラメータを追加してください。

この後、Capacitorにアプリをサーバーから直接読み込むように指示するには、パラメータを追加してください。 capacitor.config.ts file:

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

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

export default config;

正しくIPアドレスとポート番号を使用してください。Run npx cap copy これらの変更をnativeプロジェクトに適用するには

アプリをAndroid StudioまたはXcodeを通じて再度デプロイすると、Reactアプリの変更が自動的に再読み込みされ、アプリ内に表示されます!

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

Capacitor プラグインの使用

Capacitor プラグインを使用する方法を簡単に説明しましょう。シンプルなものをインストールしてみましょう。 Share プラグイン、nativeの共有ダイアログを提示します。

npm i @capacitor/share

使用するには、パッケージをインポートし、アプリから呼び出す関数を呼び出してください。App.js share() 新しいプラグインをインストールした後、再度Reactプロジェクトを同期することを忘れないでください。 App.js:

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

function ShareButton() {
  const share = async () => {
    await Share.share({
      title: 'React App',
      text: 'Visit this React App',
      url: 'http://localhost:3000',
      dialogTitle: 'Share with...'
    });
  };

  return (
    <button onClick={share}>
      Share
    </button>
  );
}

export default ShareButton;

Share プラグイン npx cap sync.

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

Native-feeling UI with Capgo Native Navigation and Transitions

数年間は イオニク を使用してクロスプラットフォームアプリケーションを構築していましたが、Reactと統合することはハック的で、すでに テイルウィンドCSS.

を持っている場合、React + Capacitor アプリでネイティブモバイルフィールを得るには、WebのみのUIキットであるKonsta UIではなく、Capgo プラグインを使用することをお勧めします。

• @capgo/capacitor-native-ナビゲーション —ネイティブのナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブラーしたタブバーのスタイル。Reactルーターのルート状態を維持し、プラグインはネイティブのChromeを所有します。
• @capgo/capacitor-transitions —IonicスタイルのページトランジションとiOSのエッジスワイプバックをWebView層に実装することなく、Ionic UIを採用する必要はありません。

両方をインストールしてください

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

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

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

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

Liquid Glassタブバーをレンダリングします (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') を呼び出してください。

ネイティブのバーを尊重するウェブコンテンツを設定するには、CSSInsetモードでネイティブのナビゲーションを設定しないでください。ウェブヘッダーまたはフッターをネイティブのナビゲーションが所有する表面に複製しないでください。 @capgo/capacitor-ネイティブナビゲーション and とUsing @capgo/capacitor-transitions.

セーフエリアのTailwind

Tailwind CSSのデバイスセーフエリアのために使用する @capgo/tailwind-capacitor （__CAPGO_KEEP_0__で公開された tailwind-capacitor ）npmで提供される safe-areas Tailwindプラグインのユーティリティやその他のCapacitor対応のもの:

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 inside <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で

With @capgo/tailwind-capacitor、ユーティリティライブラリを使用して同じパディングを表現できます。 pt-safe pb-safe px-safe そのシングルシェル上に。

Capacitor iOS contentInset を never first

最初 capacitor.config.tsで contentInsetMode: 'css',ネイティブインセットを無効にして、CSS (またはネイティブナビゲーションの

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

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) padding はダブルスペースの原因となるよくある問題です。

実際にオーバーフローしている要素を探します。

通常の原因は、ネイティブナビゲーションを使用している要素です。 100vw、テールウィンド 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,
  }));

テールウィンドで w-screen に置き換えます w-full 可能な限り。多くの水平オーバーフロー問題は 100vw / w-screen、重複したセーフエリアのパディング、または固定幅のコンテナ — ではなく、ビューポートメタタグ自体から

結論

Capacitorは既存のWebプロジェクトに基づいてネイティブアプリを構築するためのシームレスな手段を提供し、簡単な方法でcodeを共有し、UIが一貫していることを保証します。

Capacitorなどの技術により、React.js Webアプリからモバイルアプリを構築することは今まででいちばん簡単になりました。Web開発スキルを高め、インプレッシブなネイティブモバイルアプリを作成しましょう。ハッピーコーディング!

モバイルアプリ開発プロセスを高速化する方法についてさらに学びたい場合は 無料アカウントに登録してください 今日。

Keep going from Building Mobile Apps with Pure React.js and Capacitor

Capacitorを使用している場合 Building Mobile Apps with Pure React.js and Capacitor ネイティブメディアとインターフェイスの動作を計画するには、Capacitorを使用してネイティブ機能と接続します。 @capgo/capacitorライブ活動を使用 native機能の使用にあたっては、@capgo/capacitor-live-activitiesを活用する必要があります。 @capgo/capacitor-ライブアクティビティ @capgo/capacitorライブアクティビティの実装詳細のために Using @capgo/capacitor-video-player Capacitorのnative機能のために@capgo/capacitor-video-playerを使用します。 @capgo/capacitor-ビデオプレーヤー for the implementation detail in @capgo/capacitor-video-player, and Capacitorの@capgo/capacitor-video-player Capacitorの@capgo/capacitor-native-navigation