Pure React.jsとCapacitorでモバイルアプリを作る

このチュートリアルでは、ReactとCapacitorを使用してモバイルアプリケーションを作成する方法を紹介します。最終的には、Capacitorを使用してReact.jsのWebアプリをネイティブモバイルアプリケーションに変換し、Capgo Native Navigation and Transitionsを使用してネイティブなフィールを追加することができます。

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

このプロセスには、数ステップしか必要ではなく、React.jsアプリが完全に機能するモバイルアプリケーションになるまで、すぐに実行できます。なので、ここで私たちがこの旅を案内するのを待ってください。

Capacitorの概要

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

Capacitorは、ネイティブモバイルアプリケーションを作成するための簡単な方法を提供し、ハッスルや急な学習カーブを伴わないように設計されています。APIとストリーミングされた機能は、プロジェクトに簡単に組み込むことができます。

React.jsアプリの設定

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

npx create-react-app my-app

プロジェクトをネイティブモバイルアプリケーションに変換するには、 エクスポート アプリの作成には、

このあとに戻ってきます。まず、Capacitor を React アプリに統合する方法を理解してみましょう。

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

初期設定の手順は少し詳細かもしれませんが、その後、ネイティブアプリウォッパーを更新することは、コマンドを実行するだけの簡単な作業になります。 sync まず、__CAPGO_KEEP_0__ を開発依存モジュールとしてインストールし、プロジェクト内でセットアップします。セットアップ中、名前とバンドル 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.”

最後に、プラットフォームを追加し、__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

ios と android context React.jsプロジェクトにディレクトリが現在表示されています。

To access the Android project later, install Android Studio. For iOS, you need a Mac and should install Xcode.

次に、 webDir context:HTML text fragment from a longer Capgo UI string (parent key `solutions_cordova_to_capacitor_ai_step2_body`). Page/area: Capgo solutions marketing page. Role: Website copy sentence. Seen in: page solutions/cordova-to-capacitor-ai.astro. Message key `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body). capacitor.config.json __CAPGO_KEEP_0__.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

Run the build command and sync your project with __CAPGO_KEEP_0__： npm run build コマンドは、React.jsプロジェクトをビルドすることになりますが npx cap sync は、Web code を正確な場所に配置するため、ネイティブプラットフォームで実行できるようにします。

今、少しお気楽に、エラーもなく、React.jsアプリがデバイスで実行できるようになりました!

ネイティブアプリのビルドと配布

iOSアプリの開発には Xcodeが必要です。Androidアプリの開発には Android Studioが必要です。アプリをアプリストアで配布する場合、iOSにはApple Developer Programに、AndroidにはGoogle Play Consoleに登録する必要があります。

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

npx cap open ios
npx cap open android

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

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

Xcodeの場合、実機にアプリを展開するために署名アカウントを設定し、シミュレータにのみ展開するのではなく。

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

Capacitor Live Reload

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

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

最初に、ローカルIPアドレスを決定する必要があります。Macの場合、ターミナルで実行することで行うことができます。Windowsの場合、 ipconfig getifaddr en0 を実行し、IPv4アドレスを探してください。 ipconfig この後、__CAPGO_KEEP_0__がサーバーから直接アプリを読み込むように指示するには、

After this, instruct Capacitor to load the app directly from the server by adding another parameter to your 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;

を実行してください。 npx cap copy これらの変更を、nativeプロジェクトに適用します。

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

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

Capacitor プラグインの使用

Capacitor プラグインを使用する方法をご紹介します。簡単なプラグイン、 Share プラグイン、をインストールしてみましょう。これはnativeの共有ダイアログを提示します。

npm i @capacitor/share

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

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.

Capgo

数年間、 Ionic を使用してクロスプラットフォームアプリケーションを構築してきましたが、Reactと統合することはハック的で、すでに Tailwind CSS.

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

React + capgoアプリケーションでネイティブなモバイルフィールを実現するには、WebのみのUIキットであるKonsta UIではなく、capacitorプラグインを使用することをお勧めします。 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation
@capgo/capacitor-transitions @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions

—Ionicスタイルのページ遷移とiOSのエッジスワイプバックをWebView層で実現します。IonicのUIを採用する必要はありません。

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

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

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

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

iOSはシステムのレンダリングを使用し、AndroidはぼやけたWebViewのバックグラウンドを使用して、Liquid Glassタブバーをレンダリングします。

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') Capacitorライブアップデートの代替手段を比較するページで見られるHTMLテキストのフラグメントです。

アプリフローの代替手段を比較するページで見られるHTMLテキストのフラグメントです。 Using @capgo/capacitor-native-navigation コンサルティングサービスページで見られるセクションサブタイトルまたはタグラインです。 Using @capgo/capacitor-transitions.

ネイティブのナビゲーションがオーナーである場合、ウェブヘッダーまたはフッターを重複しないでください。

デバイスの安全なエリア用のTailwind CSSで @capgo/tailwind-capacitor で公開された tailwind-capacitor npm 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";

向けのTailwindプラグイン: pt-safe, pb-safeIn px-safe 使用できるユーティリティとして env(safe-area-inset-*) , open a PR on GitHub.

を手動で散らすのではなく、プロジェクトは積極的に開発されています。 Reactの設定で必要なものが不足している場合、__CAPGO_KEEP_0__にPRを開いてください

iOS上でコンテンツが切り取れ、ずれ、または水平方向にスクロールできる場合、追加の設定やビューポートタグの調整だけでは解決しないことがあります。順序に従って、次のチェックを実行してください。 overflow-x: hidden iOS上でコンテンツが切り取れ、ずれ、または水平方向にスクロールできる場合、ビューポートタグの追加や調整だけでは解決しないことがあります。順序に従って、次のチェックを実行してください。

ビューポートメタタグが正しく適用されていることを確認してください。

ビューポートメタタグを追加してください。 index.html ビューポートメタタグを <head>:

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

内側に追加してください。

iOSのセーフエリアを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すべてのページコンテンツを

内側に Wrapしてください。 @capgo/tailwind-capacitor「@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__」とともに、セーフエリアのパディングをユーティリティーとして表現することもできます。 pt-safe pb-safe px-safe その単一のシェル上に。

Capacitor iOSを設定 `contentInset` Live Update `never` 最初

In capacitor.config.tsNativeのインセットを有効にし、CSS (またはNative Navigationの) contentInsetMode: 'css'）が安全エリアを制御するようにしてください。

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

Capacitorの自動コンテンツインセットとCSSのパディングを組み合わせると、通常はダブルスペースの原因となります。 env(safe-area-inset-*) 実際にオーバーフローしている要素を探します。

通常の原因は、

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

In Safari Web Inspector で実行:

[...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 は、既存の Web プロジェクトに基づいてネイティブアプリを構築するためのシームレスな手段を提供し、簡単な方法で code を共有し、UI の一貫性を保つことができます。

技術など、Capacitor のようなものを利用して、React.js Web アプリからモバイルアプリを構築することは、以前以上に簡単になりました。Web 開発スキルを高め、インプレッシブなネイティブモバイルアプリを作成してください。ハッピーコーディング!

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

React.jsとCapacitorでモバイルアプリを作る

あなたが使用している React.jsとCapacitorでモバイルアプリを作る ネイティブメディアとインターフェイスの動作を計画するには、__CAPGO_KEEP_0__と接続する capgo/capacitor-live-activitiesを使用 capgo/capacitor-live-activitiesのネイティブ機能 capgo/capacitor-live-activitiesの実装詳細 capgo/capacitor-live-activitiesを使用 capgo/capacitor-video-playerのネイティブ機能 capgo/capacitor-video-playerの実装詳細 capgo/capacitor-video-playerを使用 capgo/capacitor-video-player Using @capgo/capacitor-native-navigation for the native capability in Using @capgo/capacitor-native-navigation.

Building Mobile Apps with Pure React.js and Capacitor

Capacitorの概要

React.jsアプリの設定

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

ネイティブアプリのビルドと配布

Capacitor Live Reload

Capacitor プラグインの使用

CapgoのネイティブなUIに__CAPGO_KEEP_1__Native NavigationとTransitions

ネイティブのナビゲーションがオーナーである場合、ウェブヘッダーまたはフッターを重複しないでください。

を手動で散らすのではなく、プロジェクトは積極的に開発されています。 Reactの設定で必要なものが不足している場合、__CAPGO_KEEP_0__にPRを開いてください

ビューポートメタタグが正しく適用されていることを確認してください。

内側に追加してください。

Capacitor iOSを設定 `contentInset` Live Update `never` 最初

通常の原因は、

結論

React.jsとCapacitorでモバイルアプリを作る

Building Mobile Apps with Pure React.js and Capacitor

Capacitorの概要

React.jsアプリの設定

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

ネイティブアプリのビルドと配布

Capacitor Live Reload

Capacitor プラグインの使用

CapgoのネイティブなUIに__CAPGO_KEEP_1__Native NavigationとTransitions

ネイティブのナビゲーションがオーナーである場合、ウェブヘッダーまたはフッターを重複しないでください。

を手動で散らすのではなく、プロジェクトは積極的に開発されています。 Reactの設定で必要なものが不足している場合、__CAPGO_KEEP_0__にPRを開いてください

ビューポートメタタグが正しく適用されていることを確認してください。

内側に追加してください。

Capacitor iOSを設定 contentInset Live Update never 最初

通常の原因は、

結論

React.jsとCapacitorでモバイルアプリを作る

Capacitor iOSを設定 `contentInset` Live Update `never` 最初