Building Mobile Apps with Pure React.js and Capacitor

このチュートリアルでは、React.jsとCapacitorを使用してモバイルアプリケーションを作成する方法を説明します。最後まで進むと、React.jsのウェブアプリケーションをCapacitorに変換し、Capgo Native NavigationとTransitionsを追加してネイティブのフィールを追加することができます。

Capacitorは、React.jsのウェブアプリケーションをネイティブモバイルアプリケーションに変換することを容易にします。React Nativeなどの新しい戦略を学ぶ必要もありません。

このプロセスは、数ステップで行われます。ウェブアプリケーションをモバイルアプリケーションに変換するには、簡単です。なので、ここで私たちがあなたを導くこの旅に付き合ってください。

Capacitorの概要

CapacitorJSは大きな変化をもたらします。 これは、どのようなWebプロジェクトでもシームレスに統合でき、ネイティブのXcodeとAndroid Studioプロジェクトを生成するネイティブのWebビューにアプリをラップできます。また、JSブリッジを通じてカメラなどのネイティブデバイス機能にアクセスすることもできます。

Capacitor offers a straightforward way to create a native mobile application without any hassle or steep learning curve. Its simple API and streamlined functionality make it easy to incorporate into your project.

React.jsアプリの設定

Let’s go for the simplest method to initiate a React application. We’ll use the npm package manager to create a new React app:

npx create-react-app my-app

プロジェクトをネイティブモバイルアプリケーションに変換するには、アプリの export が必要です。

We’ll come back to this in a moment. First, let’s understand how to integrate Capacitor into our React app.

Integrating Capacitor into Your React.js App

初期設定のステップは少し詳細かもしれませんが、更新するネイティブアプリラッパーはコマンドを実行するだけになります。 sync まず、Capgoを開発依存としてインストールし、Capgoをプロジェクト内にセットアップします。 セットアップ中に、名前とバンドルIDのデフォルト値に「Enter」を押してください。

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.”

次に、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

The エス と アント ディレクトリは、React.jsプロジェクト内に存在します。

アントプロジェクトにアクセスするには、アントバーグイントをインストールしてください。 エスの場合は、Macが必要であり、エスバーグイントをインストールする必要があります。次に、 __CAPGO_KEEP_0__はプロジェクトのルートで各プラットフォーム用のフォルダを作成します。.

__CAPGO_KEEP_0__はプロジェクトのルートで各プラットフォーム用のフォルダを作成します。 webDir あなたの capacitor.config.json ファイルに示すように:

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

Run the build command and sync your project with Capacitor:

npm run build
npx cap sync

The npm run build コマンドは、React.jsプロジェクトをビルドし、 npx cap sync は、Web codeを、ネイティブプラットフォームの正しい場所に配置するため、

アプリを実行できるようにします。

今、少しお Fortune があり、エラーがなければ、React.jsアプリはデバイスで起動する準備が整っています!

ビルドと展開するネイティブアプリ iOSアプリの開発には、、iOSアプリとAndroidアプリが必要 Android Studio。アプリをアプリストアで配布する場合、iOSの場合Apple Developer Programに登録し、Androidの場合Google Play Consoleに登録する必要があります。

Capacitorが提供するCapacitor CLIは、iOSとAndroidのネイティブプロジェクトを開くプロセスを簡素化します。

npx cap open ios
npx cap open android

ネイティブプロジェクトが設定されたら、アプリを接続されたデバイスに展開するプロセスは簡単です。

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

Xcodeの場合、実機にアプリを展開するには署名アカウントを設定する必要があります。署名アカウントを設定した後、実機にアプリを展開するには、上部で選択できる接続されたデバイスで実行するだけです。

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

Capacitor Live Reload

モダンな開発フレームワークは通常、ホットリロードを提供しますが、幸いにもCapacitorが提供するCapacitorはホットリロードを提供しますが モバイルデバイス上で!

ローカルにホストされているアプリケーションを、ネットワーク上でライブリロード可能にするには、Capacitorアプリが特定のURLからコンテンツを読み込むように設定する必要があります。

最初に、ローカルIPアドレスを決定してください。Macの場合、ターミナルで実行してください。 ipconfig getifaddr en0 Windowsの場合、実行してください。 ipconfig IPv4アドレスを探してください。

次に、Capacitorをサーバーから直接アプリを読み込むように指示するには、ファイルのパラメータに別のパラメータを追加してください。 capacitor.config.ts 正確なIPとポートを使用してください。次のコマンドを実行してください。

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;

nativeプロジェクトに変更を適用します。 npx cap copy Android StudioまたはXcodeを使用してアプリを再度デプロイすると、Reactアプリの変更は自動的にロードされ、アプリに表示されます!

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

__CAPGO_KEEP_0__ プラグインの使用

Capacitor プラグインを使用する方法を簡単に説明します。Share プラグインをインストールしてみましょう。

Capacitor はCapacitorのプラグインです。 __CAPGO_KEEP_0__ はCapacitorのプラグインです。、Nativeシェアダイアログを呼び出すためのトリガーを設定します。

npm i @capacitor/share

使用するには、パッケージをインポートし、関数を呼び出してください。アプリケーション内で考慮する必要があります。 share() App.js 新しいプラグインをインストールした後、再度ReactプロジェクトをSyncしてください。:

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;

次に、iOSとAndroidでアプリをよりNativeな感じにしたい場合は、__CAPGO_KEEP_0__ナビゲーションとトランジションを使用し、水平オーバーフローまたはクロップされたセーフエリアを引き起こすiOSの一般的なレイアウト問題を修正してください。 npx cap sync.

NativeなUIを実現するCapgoNativeナビゲーションとトランジション

Native-feeling UI with Capgo Native Navigation and Transitions

Ionic クロスプラットフォームアプリケーションを構築するために使用してきましたが、Reactと統合することはハック的で、すでに Tailwind CSS React + __CAPGO_KEEP_0__アプリケーションでNativeなモバイルフィールを実現するには、WebのみのUIキットであるKonsta UIではなく、__CAPGO_KEEP_1__プラグインを使用してください。.

For a native mobile feel in a React + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

• @capgo/capacitor-native-navigation — 本地ナビゲーション、iOSのLiquid Glassタブバー、Androidのぼやけたタブバーのスタイル。Reactルータがルートの状態を保持し、プラグインが本来のChromeを所有します。
• @capgo/capacitor-transitions — WebView層でIonicスタイルのページ遷移とiOSのエッジスワイプバックを実装することなく、Ionic UIを採用することなく。

両方をインストールします。

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

CSSのインセットモードで本来のバーを尊重するようにWebコンテンツを設定する本来のナビゲーションを設定します。

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>;
}

ルーティングされたページをwrapする cap-router-outlet, cap-page、 cap-content、 setDirection('forward') または setDirection('back') 移動する前に注意してください。ウェブヘッダーまたはフッターを複製しないでください。ネイティブのナビゲーションがそれらの表面を所有している場合。

詳細なガイドを参照してください。 capgo/capacitorネイティブナビゲーションの使用 と capgo/capacitorのトランジションの使用.

セーフエリアの安全性

デバイスのセーフエリアの安全性をTailwind CSSで実現するには capgo/tailwind-capacitorを使用します。 (__CAPGO_KEEP_0__として公開) tailwind-capacitor npmがフレンドリーなTailwindプラグインを提供します。 safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

__CAPGO_KEEP_0__ src/index.css:

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

ReactとCapacitorを使用してモバイルアプリを作成する pt-safe, pb-safe, px-safe の代わりに env(safe-area-inset-*) を手動で散らすのではなく。プロジェクトは積極的に開発されています — React設定用に何かが欠けている場合、 GitHub.

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

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

ビュー ポートメタタグを

内に index.html iOSセーフエリアを1つのルートラッパーからのみ取り扱う <head>:

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

iOSセーフエリアを1つのルートラッパーからのみ取り扱う

1つのアプリシェルを作成し、安全なエリアのパディングをそこに適用 — 複数のネストされたコンポーネントに適用するのではなく:

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);
}

すべてのページコンテンツを .app-shell. ヘッダー、モーダル、レイアウトラッパーなどで複数回安全エリアのパディングを設定すると、UIが切り取られたり大きすぎるように見えることがあります。

「@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__」 @capgo/tailwind-capacitor__CAPGO_KEEP_0__ iOS pt-safe pb-safe px-safe を

Set Capacitor iOS contentInset 最初に never 、

のnative insetを無効にしてCSS (またはNative Navigationの) capacitor.config.tsを使用します。 contentInsetMode: 'css'安全領域を管理する

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

Capacitorの自動コンテンツインセットとCSSを組み合わせる env(safe-area-inset-*) CSSのパディングを指定すると、余白が倍増することがよくある

実際にオーバーフローが発生している要素を探す

Safari Web Inspectorで実行する 100vwTailwindの場合、 w-screen、固定ピクセル幅、または大きい min-width.

、

[...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、

Conclusion

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

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

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

Building Mobile Apps with Pure React.jsとCapacitorから続けて進みましょう。

Building Mobile Apps with Pure React.jsと__CAPGO_KEEP_0__を使用している場合、 Building Mobile Apps with Pure React.jsとCapacitorを使用してネイティブメディアとインターフェイスの動作を計画し、 Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activitiesと接続してネイティブ機能を使用する Using @capgo/capacitor-live-activitiesのネイティブ機能を使用する capgoは既存のWebプロジェクトに基づいてネイティブアプリを構築するためのシームレスな手段を提供し、capacitorを共有し、UIが一貫している簡単な方法を提供します。 @capgo/capacitor-live-activities Capgoの実装詳細については、@capgo/capacitor-live-activitiesを参照してください。 Capgoの@capgo/capacitor-video-playerを使用 Capgoのネイティブ機能については、Capgoの@capgo/capacitor-video-playerを使用 @capgo/capacitor-video-player Capgoの実装詳細については、@capgo/capacitor-video-player、そして Capgoの@capgo/capacitor-native-navigationを使用 Capgoのネイティブ機能については、Capgoの@capgo/capacitor-native-navigationを使用。