Mobile Apps mit reinem React.js und Capacitor erstellen

Dieses Tutorial führt Sie durch die Erstellung einer mobilen Anwendung mit React und Capacitor. Am Ende werden Sie wissen, wie Sie eine React.js-Web-Anwendung in eine native mobile Anwendung mit Capacitor umwandeln und eine native Atmosphäre mit Capgo Native Navigation und Transitions hinzufügen können.

Capacitor ermöglicht die einfache Umwandlung Ihrer React.js-Web-Anwendung in eine native mobile Anwendung, ohne wesentliche Änderungen oder das Lernen neuer Strategien wie React Native.

Der Prozess umfasst einige einfache Schritte, und bevor Sie es wissen, ist Ihre React.js-Anwendung eine voll funktionsfähige mobile Anwendung. Also bleiben Sie bei uns, während wir Sie auf dieser Reise begleiten.

Capacitor-Übersicht

CapacitorJS ist ein Game-Changer. Es kann problemlos mit jedem Web-Projekt integriert werden und Ihre App in eine native WebView einhüllen, während gleichzeitig die native Xcode- und Android-Studio-Projekt erstellt werden. Zudem können Sie durch seine Plugins Zugriff auf native Geräte-Funktionen wie die Kamera über eine JS-Brücke erhalten.

Capacitor bietet eine direkte Möglichkeit, eine native mobile Anwendung ohne jede Umstände oder steile Lernkurve zu erstellen. Seine einfache API und gestreamte Funktionalität machen es leicht, es in Ihr Projekt einzubinden.

Einrichten Ihrer React.js-Anwendung

Lasst uns mit der einfachsten Methode beginnen, um eine React-Anwendung zu initiieren. Wir werden den npm-Package-Manager verwenden, um eine neue React-Anwendung zu erstellen:

npx create-react-app my-app

Um unsere Projekt in eine native mobile App umzuwandeln, ist eine export von unserer App erforderlich.

Wir werden darauf zurückkommen. Zuerst müssen wir verstehen, wie Capacitor in unsere React-Anwendung integriert werden kann.

Integration von Capacitor in Ihre React.js App

Die ersten Einrichtungsschritte mögen ein bisschen detailliert sein, aber danach wird das Aktualisieren Ihres native App Wrappers so einfach wie das Ausführen eines sync Befehls.

Zuerst installieren wir das Capacitor CLI als Entwicklungsabhaengigkeit und setzen es innerhalb unseres Projekts auf. Während der Einrichtung akzeptieren Sie die Standardwerte für Name und Bundle-ID, indem Sie 'Enter' drücken.

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

Schließlich fügen wir die Plattformen hinzu und Capacitor erstellt Ordner für jede Plattform in unserem Projektroot:

# 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

Die iOS und Android Verzeichnisse sind jetzt in Ihrem React.js-Projekt vorhanden.

Um auf das Android-Projekt später zuzugreifen, installieren Sie Android Studio. Für iOS benötigen Sie einen Mac und sollten Xcode.

Als Nächstes aktualisieren Sie das webDir context 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

Ausführen Sie den Build-Befehl und synchronisieren Sie Ihr Projekt mit __CAPGO_KEEP_0__: npm run build Die npx cap sync will align the web code in the accurate places of the native platforms so they can be executed in an app.

Jetzt, mit ein bisschen Glück und ohne Fehler, sollte Ihre React.js-Anwendung für den Start auf einem Gerät bereit sein!

Erstellung und Bereitstellung Ihrer nativen Apps

Die Entwicklung von iOS-Anwendungen erfordert Xcode, und Android-Anwendungen benötigen Android Studio. Wenn Sie Ihre App im App-Store verteilen möchten, müssen Sie sich für iOS im Apple Developer Programm und für Android im Google Play Console anmelden.

Die Capacitor CLI vereinfacht den Prozess, beide native Projekte zu öffnen:

npx cap open ios
npx cap open android

Sobald Ihre native Projekte eingerichtet sind, ist die Bereitstellung Ihrer App auf einem verbundenen Gerät ein einfacher Prozess.

Für Android Studio warten Sie, bis alles geladen ist, und deployen Sie dann Ihre App auf ein verbundenes Gerät.

Für Xcode stellen Sie Ihr Signierkonto ein, um Ihre App auf einem realen Gerät zu deployen, anstatt nur auf dem Simulator. Nachdem Sie das getan haben, drücken Sie einfach auf 'Play', um die App auf Ihrem verbundenen Gerät auszuführen, das Sie oben auswählen können.

Wenn alles gut gelaufen ist, haben Sie Ihre React.js-Webanwendung in eine native mobile Anwendung umgewandelt!

Capacitor Live Reload

Moderne Entwicklungsframeworks verfügen normalerweise über Hot Reload, und zum Glück kannst du das auch mit Capacitor haben, aber auf deinem Mobilgerät!

Du kannst deine lokal gehostete Anwendung mit Live Reload auf deinem Netzwerk zugänglich machen, indem du die Capacitor-App so einstellst, dass sie den Inhalt von einer bestimmten URL lädt.

Zuerst musst du deinen lokalen IP-Adresse bestimmen. Auf einem Mac kannst du das tun, indem du im Terminal ipconfig getifaddr en0 ausführst. Auf Windows ausführst du ipconfig und suchst nach der IPv4-Adresse.

Nach diesem Schritt instruiere Capacitor dazu, die App direkt vom Server zu laden, indem du einen anderen Parameter zu deinem capacitor.config.ts Datei hinzufügst:

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;

Achte darauf, dass du die genaue IP-Adresse und den Port verwendest. Führe npx cap copy aus, um diese Änderungen auf unserem native Projekt anzuwenden.

Bei der nächsten Veröffentlichung deiner App durch Android Studio oder Xcode werden alle Änderungen in deiner React-Anwendung automatisch neu geladen und auf deiner App angezeigt!

Bitte beachten Sie, dass bei der Installation neuer Plugins wie z.B. der Kamera eine Neuverteilung Ihres native Projekts erforderlich ist. Dies liegt daran, dass die native Dateien geändert wurden und nicht auf der Fliege aktualisiert werden können.

Verwendung von Capacitor Plugins

Zunächst möchten wir Ihnen einen kurzen Überblick über die Verwendung eines Capacitor Plugins geben. Lassen Sie uns ein einfaches Plugin installieren, nämlich das Share-Plugin, das den native Share-Dialog auslöst:

npm i @capacitor/share

Um es zu verwenden, importieren Sie das Paket und rufen Sie die entsprechende share() function aus unserem App aus. Beachten Sie die 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;

Nach der Installation eines neuen Plugins vergessen Sie bitte nicht, Ihre React-Projekt wieder zu synchronisieren mit npx cap sync.

Als nächstes können Sie die App auf iOS und Android mit Capgo Navigation und Übergängen noch nativer anfühlen lassen und häufige iOS-Anzeigefehler, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen, beheben.

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

Für Jahre habe ich mit ionic um cross-platform-Anwendungen zu erstellen, aber die Integration mit React ist hackig und selten wertvoll, wenn Sie bereits Tailwind CSS.

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 — native Navbar, Liquid Glass-Tasteleiste auf iOS und eine verschwommene Tasteleiste-Style auf Android. Ihre React-Router behält die Routenstatus; der Plugin besitzt die native Chrome.
• @capgo/capacitor-transitions — Ionic-Style-Seitenübergänge und iOS-Rück-Edge-Swipe in der WebView-Schicht, 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 Web-Inhalt die native Balken respektiert:

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

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

Rendern Sie eine verschwommene Tasteleiste (iOS verwendet die Systemeigene Rendering; Android verwendet eine verschwommene 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>;
}

Wie Sie Seiten mit gerouteten Seiten umschließen cap-router-outlet, cap-page, und cap-content, und aufrufen setDirection('forward') oder setDirection('back') Bevor Sie navigieren. Duplizieren Sie Web-Überschriften oder -Fußzeilen nicht, wenn native Navigation diese Oberflächen besitzt.

Siehe die vollständigen Anleitungen: Verwenden Sie @capgo/capacitor-native-Navigation und Verwenden Sie @capgo/capacitor-Übergänge.

Sichere Bereiche mit Tailwind

Für sichere Bereiche auf Geräten in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (veröffentlicht als) tailwind-capacitor auf npm). Es bietet safe-areas Hilfsmittel und andere Capacitor-freundliche Tailwind-Plugins:

bun add -D tailwind-capacitor

In src/index.css:

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

Verwenden Sie Hilfsmittel wie pt-safe, pb-safe, und px-safe anstatt sie env(safe-area-inset-*) manuell zu verteilen. Das Projekt wird aktiv weiterentwickelt – wenn etwas für Ihre React-Einrichtung fehlt, eröffnen Sie ein PR auf GitHub.

Fixing iOS Layout Issues (Viewport, Safe Area, und Horizontal Overflow)

Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, fügen Sie mehr overflow-x: hidden oder passen Sie den Viewport-Tag an, reicht das normalerweise nicht aus. Arbeiten Sie durch diese Kontrollen in der Reihenfolge.

Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird

Fügen Sie die Viewport-Metatag in index.html innerhalb <head>:

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

Behandeln Sie das iOS-Sicherheitsbereich von einem einzigen Root-Wrapper aus

Erstellen Sie ein einzelnes App-Shell und fügen Sie dort den sicheren Bereich-Puffer an — nicht in mehreren verschachtelten Komponenten:

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

Umgeben Sie alle Seite-Inhalte innerhalb .app-shellDoppelte sichere-Bereich-Puffer in Kopfzeilen, Modalen und Layout-Wrapper machen die Benutzeroberfläche oft gekürzt oder zu groß aus.

Mit @capgo/tailwind-capacitorkönnen Sie denselben Puffer mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf diesem einzelnen Shell ausdrücken.

Setzen Sie Capacitor iOS contentInset zu never erstes

In capacitor.config.ts, bevor Sie native Einstellungen deaktivieren und CSS (oder Native Navigation) die sichere Fläche übernehmen lassen: contentInsetMode: 'css'Die Mischung aus __CAPGO_KEEP_0__’s automatischer Inhaltseinstellung und CSS-Paddings ist eine häufige Ursache für doppelte Abstände.

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-*) Der übliche Täter ist ein Element, das

, Tailwind

, eine feste Pixelbreite oder eine große 100vwIn Safari Web Inspector, führen Sie: w-screen, a fixed pixel width, or a large min-width.

In Safari Web Inspector, run:

[...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 Sie w-screen mit w-full Viele horizontale Überlaufprobleme kommen von 100vw / w-screen, dupliziertem sicheren Bereichs-Padding oder einem festen Breiten-Container — nicht von der Viewport-Meta-Tags selbst.

Zusammenfassung

Capacitor bietet einen nahtlosen Weg zum Erstellen von nativen Apps auf der Grundlage eines bestehenden Web-Projekts, indem eine einfache Möglichkeit zur Verfügung gestellt wird, code zu teilen und eine konsistente Benutzeroberfläche zu haben.

Danke an Technologien wie Capacitor, das das Erstellen von mobilen Anwendungen aus React.js-Web-Apps nie einfacher gewesen ist. Nehmen Sie Ihre Web-Entwicklungs-Fähigkeiten auf die nächste Ebene, indem Sie beeindruckende native mobile Apps erstellen. Viel Spaß beim Programmieren!

Für weitere Informationen darüber, wie Sie Ihren Entwicklungsprozess beschleunigen können registrieren Sie sich für ein kostenloses Konto heute.

Fortsetzen Sie mit dem Erstellen von mobilen Apps mit reinem React.js und Capacitor

Wenn Sie __CAPGO_KEEP_0__ verwenden Mit React.js und Capacitor mobile Apps erstellen um native Medien und Schnittstellenverhalten zu planen und es mit __CAPGO_KEEP_0__ zu verbinden Mit @capgo/capacitor-live-Activities Für die native Fähigkeit in Mit @capgo/capacitor-live-Activities @capgo/capacitor-live-Activities Für die Implementierungsdetails in @capgo/capacitor-live-Activities Mit @capgo/capacitor-video-Player Für die native Fähigkeit in Mit @capgo/capacitor-video-Player @capgo/capacitor-video-Player Für die Implementierungsdetails in @capgo/capacitor-video-Player und Mit @capgo/capacitor-native-Navigation Für die native Fähigkeit in Mit @capgo/capacitor-native-Navigation