Mobile Apps mit React und Capacitor erstellen

In diesem Tutorial beginnen wir mit einer neuen React App und wechseln zu einer nativen mobilen Entwicklung mit Capacitor. Sie können auch Capgo Native Navigation und Transitions hinzufügen, um eine nativere mobile Erfahrung zu erhalten, und tailwind-capacitor für sichere Bereiche verwenden.

Capacitor ermöglicht es Ihnen, Ihre React-Webanwendung leicht in eine nativere mobile App umzuwandeln, ohne signifikante Änderungen oder das Erlernen einer neuen Fähigkeit wie React Native.

Mit nur wenigen einfachen Schritten können die meisten React-Anwendungen in mobile Apps umgewandelt werden.

In diesem Tutorial werden wir Ihnen durch den Prozess führen, beginnend mit einer neuen React-App und dann Capacitor einsetzend, um in die Welt der nativen mobilen Apps zu gelangen. Sie können auch Capgo Native Navigation, Transitions und tailwind-capacitor für sichere Bereiche verwenden.

Über Capacitor

CapacitorJS ist ein Game-Changer! Sie können es leicht in jedes Web-Projekt einbetten und es wird Ihre Anwendung in eine native WebView einbetten, wodurch die native Xcode- und Android-Studio-Projekte generiert werden. Zusätzlich bieten seine Plugins Zugriff auf native Gerätefeatures wie die Kamera über eine JS-Brücke.

Mit Capacitor erhalten Sie eine fantastische nativere mobile App ohne einen komplizierten Setup oder einen steilen Lernkurven. Seine schlanken API und seine gestreamte Funktionalität machen es zu einem Kinderspiel, es in Ihr Projekt zu integrieren. Vertrauen Sie mir, Sie werden sich wundern, wie leicht es ist, eine vollständig funktionierende nativere App mit Capacitor zu erreichen.

Vorbereitung Ihrer React-App

Zwar gibt es verschiedene Möglichkeiten, React-Anwendungen zu initiieren, aber in diesem Tutorial wählen wir die einfachste Methode, die eine leere React-Anwendung bereitstellt:

npx create-react-app my-app

In Ordnung, um eine native mobile App zu erstellen, benötigen wir ein export des Projekts. Daher fügen wir ein einfaches Skript in unserem package.json ein, das verwendet werden kann, um die React-Anwendung zu erstellen und zu exportieren:

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

Sie können jetzt ohne Sorgen ausführen, und Sie sollten ein frisches Verzeichnis namens npm run build __CAPGO_KEEP_0__

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

Adding Capacitor to Your React App

__CAPGO_KEEP_0__ sync verwendet, aber für den Moment müssen wir es korrekt einrichten.

Zuerst können wir das Capacitor CLI als Entwicklungspaket installieren und dann innerhalb unseres Projekts einrichten. Während der Einrichtung können Sie auf „Enter“ drücken, um die Standardwerte für Name und Bundle-ID zu akzeptieren.

Als nächstes müssen wir das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen installieren.

Schließlich können wir die Plattformen hinzufügen und Capacitor wird für jede Plattform einen Ordner am Root unseres Projekts erstellen:

# 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

An diesem Punkt sollten Sie neue ios und context Page/area: Capgo marketing website. Role: Short UI label or navigation item. Seen in: page trust.astro. Message key `and` (And).

android

Ordner in Ihrem React-Projekt beobachten können. Android StudioFür iOS benötigen Sie einen Mac und sollten Xcode.

Darüber hinaus sollten Sie ein 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 __CAPGO_KEEP_0__Einstellungen enthalten, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist der

webDir capacitor.config.json Um dies zu korrigieren, öffnen Sie das __CAPGO_KEEP_0__.config.json:

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

Sie können es ausprobieren, indem Sie die folgenden Befehle ausführen:

npm run build
npx cap sync

Der erste Befehl npm run build baut einfach Ihr React-Projekt und exportiert das statische Build.

Während der zweite Befehl npx cap sync synchronisiert alle Web code in die richtigen Orte der nativen Plattformen, damit sie in einer App angezeigt werden können.

Zusätzlich kann der Synchronisierungsbefehl die nativen Plattformen aktualisieren und Plugins installieren, sodass, wenn Sie ein neues Capacitor-Plugin installieren, Sie es erneut ausführen müssen. npx cap sync Ohne es zu merken, sind Sie jetzt tatsächlich fertig, also sehen wir uns das App auf einem Gerät an!

Erstellen und Bereitstellen von nativen Apps

Um iOS-Apps zu entwickeln, benötigen Sie

eine native Entwicklungsumgebung Xcode installiert und für Android-Apps benötigen Sie, dass Sie Android Studio installiert haben. Darüber hinaus müssen Sie, wenn Sie Ihre App im App-Store verteilen möchten, sich bei Apple Developer Program für iOS und Google Play Console für Android anmelden.

Wenn Sie neu bei der nativen mobilen Entwicklung sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:

npx cap open ios
npx cap open android

Einmal Ihre native Projekte eingerichtet, ist die Bereitstellung Ihrer App auf einem verbundenen Gerät einfach. In Android Studio müssen Sie nur auf alles warten, bis alles bereit ist, und Sie können Ihre App auf einem verbundenen Gerät bereitstellen, ohne dass Sie Einstellungen ändern müssen. Hier ist ein Beispiel:

In Xcode müssen Sie Ihre Signierungsaccount einrichten, um Ihre App auf einem echten Gerät bereitzustellen, anstatt nur auf dem Simulator. Wenn Sie das noch nicht gemacht haben, führt Xcode Sie durch den Prozess (aber wiederum benötigen Sie sich bei dem Entwicklerprogramm angemeldet zu haben). Anschließend können Sie einfach auf 'Play' klicken, um die App auf Ihrem verbundenen Gerät auszuführen, das Sie oben auswählen können. Hier ist ein Beispiel:

Glückwunsch! Sie haben erfolgreich Ihre React-Web-App auf einem mobilen Gerät bereitgestellt. Hier ist ein Beispiel:

Aber warten Sie, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…

Capacitor Live Reload

Mit der Zeit bist du wahrscheinlich daran gewöhnt, dass du Hot Reload mit allen modernen Frameworks hast, und die gute Nachricht ist, dass du dieselbe Funktionalität auf einem mobilen Gerät mit minimalen Anstrengungen haben kannst!

Zugriff auf deine lokal gehostete Anwendung mit Live Reload auf deinem Netzwerk erhalten, indem du die Capacitor App so einstellst, dass sie die Inhalte von der spezifischen URL lädt.

Der erste Schritt besteht darin, deine lokale IP-Adresse zu ermitteln. Wenn du einen Mac verwendest, kannst du dies herausfinden, indem du den folgenden Befehl im Terminal ausführst:

ipconfig getifaddr en0

Bei Windows ausführen:

ipconfig

Dann suche nach der IPv4-Adresse.

Wir können Capacitor anweisen, die App direkt vom Server zu laden, indem wir eine weitere Eintragung in unserem capacitor.config.ts Datei hinzufügen:

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;

Stellen Sie sicher, dass Sie den richtigen IP- und Port verwenden, ich habe in diesem Beispiel die Standard-React-Port verwendet.

Jetzt können wir diese Änderungen, indem wir sie in unser natives Projekt kopieren, anwenden:

npx cap copy

Der copy Befehl ähnelt sich sync, aber er wird nur die Änderungen im Web-Ordner und der Konfiguration kopieren, ohne das natives Projekt zu aktualisieren. Sie können Ihre App nun ein weiteres Mal über Android Studio oder Xcode bereitstellen. Anschließend wird, wenn Sie etwas in Ihrer React-App ändern, die App automatisch neu geladen und die Änderungen angezeigt!

Sie können Ihre App nun ein weiteres Mal über Android Studio oder Xcode bereitstellen. Anschließend wird, wenn Sie etwas in Ihrer React-App ändern, die App automatisch neu geladen und die Änderungen angezeigt! Sie können Ihre App nun ein weiteres Mal über Android Studio oder Xcode bereitstellen. Anschließend wird, wenn Sie etwas in Ihrer React-App ändern, die App automatisch neu geladen und die Änderungen angezeigt! Sie können Ihre App nun ein weiteres Mal über Android Studio oder Xcode bereitstellen. Anschließend wird, wenn Sie etwas in Ihrer React-App ändern, die App automatisch neu geladen und die Änderungen angezeigt!

Bitte beachten Sie dass Sie bei der Installation neuer Plugins wie der Kamera eine Neuverteilung Ihres native Projekts durchführen müssen. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Flugschleife erfolgen kann.

Hinweis: Verwenden Sie bitte die richtige IP-Adresse und den Port in Ihrer Konfiguration. Der code-Block oben zeigt die Standard-React-Port für Demonstrationszwecke an.

Verwendung von Capacitor-Plugins

Zum Beispiel können wir eine Capacitor-Erweiterung in Aktion betrachten, die wir bereits mehrfach erwähnt haben. Um dies zu tun, können wir eine relativ einfache Erweiterung installieren, indem wir folgenden Befehl ausführen:

npm i @capacitor/share

Es ist nichts Besonderes an dem Teilen-Plugin, aber es bringt trotzdem den native Teilen-Dialog auf. Für dies benötigen wir nun nur noch die Pakete zu importieren und die Funktion in unserem App aufzurufen. Lassen Sie uns die share() src/App.js anpassen. Zum Beispiel, wenn Sie neue Plugins installieren, müssen Sie eine Synchronisationsoperation durchführen und das App dann auf Ihrem Gerät neu deployen. Um dies zu tun, führen Sie bitte folgenden Befehl aus:

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;

Bitte beachten Sie, dass Sie bei der Installation neuer Plugins wie der Kamera eine Neuverteilung Ihres native Projekts durchführen müssen. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Flugschleife erfolgen kann.

npx cap sync

After dem Knopf zu drücken, können Sie das schöne native Teilen-Dialog in Aktion sehen!

Als Nächstes können Sie die App so gestalten, dass sie sich auf iOS und Android nativer anfühlt, mit Capgo-Navigation und -Übergängen und die häufigen iOS-Anordnungsprobleme beheben, die zu horizontaler Überflutung oder gekürzten sicheren Bereichen führen.

Nativ anfühlen UI mit Capgo-Native-Navigation und -Übergängen

Jahre lang habe ich mit Ionic gearbeite, um cross-plattformische Anwendungen zu erstellen, aber die Integration mit React ist hackig und selten wertvoll, wenn Sie bereits Tailwind CSS.

haben. Für einen nativen mobilen Look in einer React + Capacitor-Anwendung verwenden Sie stattdessen Capgo-Plugins anstelle von web-only UI-Kits wie Konsta UI:

• @capgo/capacitor-native-navigation — nativer Navbar, Liquid Glass-Tasteleiste auf iOS und eine verschwommene Tasteleiste-Style auf Android. Ihr React-Router behält die Routenstatus; der Plugin besitzt die native Chrome.
• @capgo/capacitor-transitions --- Ionische-Seiten-Übergänge und iOS-Rück-Überprüfung am Rand, ohne Ionic-UI zu übernehmen.

Installieren Sie beide:

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

Konfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit das Webinhalte die native Balken respektieren:

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

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

Rendern Sie eine flüssige Glas-Taste (iOS verwendet die Systemeigene Rendering; Android verwendet einen verschwommenen WebView-Hintergrund):

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

Fügen Sie native-Seiten-Übergänge in Ihrem App-Shell hinzu:

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 routed-Seiten in cap-router-outlet, cap-pageund cap-contentund rufen Sie setDirection('forward') oder setDirection('back') Beachten Sie die vollständigen Anleitungen:

Verwenden Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-Navigation Verwenden Sie @capgo/capacitor-native-Navigation und Mit @capgo/capacitor-Übergängen.

Sichere Bereiche mit Tailwind

Für Gerätesichere Bereiche in Tailwind CSS verwenden Sie (@capgo/tailwind-capacitor veröffentlicht als tailwind-capacitor auf npm safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

Nutzfunktionen und andere __CAPGO_KEEP_0__-freundliche Tailwind-Plugins: src/index.css:

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

In pt-safe, pb-safeVerwenden Sie Nutzfunktionen wie px-safe und env(safe-area-inset-*) per Hand. Das Projekt wird aktiv weiterentwickelt — wenn etwas für Ihre React-Einrichtung fehlt, Öffnen Sie einen PR auf GitHub.

iOS-Bereichsprobleme beheben (Viewport, sichere Fläche und horizontale Überschreitung)

Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar sind, hilft das Hinzufügen oder Anpassen des Viewport-Tags normalerweise nicht. Arbeiten Sie durch diese Kontrollen in der Reihenfolge. overflow-x: hidden Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird

Fügen Sie die Viewport-Metatag in

innerhalb von index.html Behandeln Sie die iOS-sichere Fläche nur von einem Root-Wrapper aus <head>:

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

Erstellen Sie ein einzelnes App-Shell und wenden Sie dort die sichere Flächen-Abstände an — nicht in mehreren verschachtelten Komponenten:

Verwenden Sie alle Seiteninhalte innerhalb von

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

Zweifacher sichere-Flächen-Abstand in Kopfzeilen, Modalen und Layout-Wrappern macht die Benutzeroberfläche oft gekürzt oder zu groß aus. .app-shellFixing iOS Layout Issues (Viewport, Safe Area, and Horizontal Overflow)

With @capgo/tailwind-capacitor, Sie können denselben Rand mit Hilfsmitteln wie pt-safe pb-safe px-safe auf dieser einzelnen Shell.

Setzen Sie Capacitor iOS contentInset auf never erst

In capacitor.config.ts, bevorzugt native inset disabled und lassen Sie CSS (oder Native Navigation’s contentInsetMode: 'css') den sicheren Bereich besitzen:

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

Die Mischung von Capacitor’s automatischem Inhaltseinschub mit CSS env(safe-area-inset-*) Paddings ist eine häufige Ursache für doppelte Abstände.

Finden Sie das echte überlaufende Element

Der übliche Täter ist ein Element, das verwendet 100vw, Tailwind w-screen, einen fixen Pixelbreite oder eine große min-width.

In Safari Web Inspector, ausführen:

[...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,
  }));

Mit Tailwind, ersetzen w-screen mit w-full wenn möglich. Viele horizontale Überlaufprobleme kommen von 100vw / w-screen, dupliziertem sicherem Bereich-Puffer oder einem fixbreiten Container — nicht von der Viewport-Meta-Tags selbst.

Schlussfolgerung

Capacitor ist eine hervorragende Option für die Erstellung von nativen Anwendungen auf der Basis eines bestehenden Web-Projekts, die eine einfache Möglichkeit bietet, code zu teilen und eine konsistente Benutzeroberfläche zu erhalten.

Und mit der Hinzufügung von CapgoEs ist sogar einfacher, live Updates in Ihre App zu integrieren, damit Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.

Wenn Sie gerne wissen möchten, wie Sie Capgo in Ihre React-App einfügen können, lesen Sie bitte das nächste Artikel:

Fortsetzen Sie mit Building Mobile Apps with React und Capacitor

Wenn Sie __CAPGO_KEEP_0__ verwenden Building Mobile Apps with React und Capacitor um die CI/CD-Automatisierung zu planen, verbinden Sie es mit __CAPGO_KEEP_0__ CI/CD Capgo CI/CD für das Produktworkflow in Capgo CI/CD Capgo Native Builds für das Produktworkflow in Capgo Native Builds Capgo Integrations für den Produktworkflow in Capgo Integrations, CI/CD-Integration für die Implementierungsdetails in CI/CD-Integration, und GitHub Aktionen-Integration für die Implementierungsdetails in GitHub Aktionen-Integration.