Mobile Apps mit reinem React.js und Capacitor erstellen

Bei dieser Anleitung werden Sie durch die Erstellung einer mobilen Anwendung mit React und Capacitor geführt. Am Ende wissen Sie, wie Sie eine React.js-Webanwendung in eine native mobile Anwendung mit Capacitor umwandeln und eine native Atmosphäre mit Capgo Native Navigation und Übergängen hinzufügen können.

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

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 nahtlos mit jedem Web-Projekt integriert werden und umhüllt Ihre App in eine native WebView, während gleichzeitig die native Xcode- und Android-Studio-Projekte generiert werden. Zudem können Sie über seine Plugins Zugriff auf native Gerätefeatures wie die Kamera über eine JS-Brücke erhalten.

Capacitor bietet eine einfache Möglichkeit, eine native mobile Anwendung ohne jede Mühe 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 den einfachsten Weg wählen, 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 unser Projekt in eine native mobile App umzuwandeln, ist ein export von unserer App erforderlich.

Wir kommen darauf zurück. Zuerst müssen wir verstehen, wie man Capacitor in unsere React-Anwendung integriert.

Integrieren von Capacitor in Ihre React.js-Anwendung

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

Zuerst werden wir den Capacitor-CLI als Entwicklungsabhängigkeit installieren und ihn innerhalb unseres Projekts einrichten. Während der Einrichtung akzeptieren Sie die Standardwerte für Namen und Bundle-ID, indem Sie 'Enter' drücken.

Installieren wir nun das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen.

Zum Schluss 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 Ordner sind nun im React.js-Projekt vorhanden.

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

installieren. Update the webDir auf Ihrem capacitor.config.json wie unten gezeigt:

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

Ausführen Sie den Build-Befehl und synchronisieren Sie Ihr Projekt mit Capacitor:

npm run build
npx cap sync

Die npm run build Kommandozeile wird Ihr React.js-Projekt erstellen, während npx cap sync die code-Webanwendung auf den richtigen Plätzen der nativen Plattformen ausgerichtet wird, damit sie in einer App ausgeführt werden können.

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

Erstellung und Bereitstellung Ihrer nativen Apps

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

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

npx cap open ios
npx cap open android

Einmal eingerichtet, 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 einem verbundenen Gerät.

Für Xcode stellen Sie Ihr Signierkonto ein, um Ihre App auf einem echten Gerät zu deployen und nicht nur im Simulator. Anschließend 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-Web-App in eine native mobile Anwendung umgewandelt!

Capacitor Live Reload

Moderne Entwicklungsframeworks verfügen normalerweise über Hot Reload, und zum Glück können Sie mit Capacitor dasselbe haben, auf Ihrem mobilen Gerät!

Sie können Ihre lokal gehostete Anwendung mit Live Reload auf Ihrem Netzwerk zugänglich machen, indem Sie die Capacitor-App laden, die den Inhalt von einer bestimmten URL lädt.

Zuerst müssen Sie Ihre lokale IP-Adresse ermitteln. Auf einem Mac können Sie dies tun, indem Sie im Terminal ipconfig getifaddr en0 führen Sie in Ihrem Terminal ipconfig und suchen Sie nach der IPv4-Adresse.

Nach diesem Schritt müssen Sie Capacitor anweisen, die App direkt vom Server zu laden, indem Sie einen anderen Parameter zu Ihrer capacitor.config.ts Datei hinzufügen:

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;

Achten Sie darauf, dass Sie die genaue IP-Adresse und den Port verwenden. Führen Sie npx cap copy aus, um diese Änderungen an unserem native Projekt anzuwenden.

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

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

Mit Capacitor-Plugins

Zurück zur Übersicht: Lassen Sie uns schnell einen Blick darauf werfen, wie man ein Capacitor-Plugin verwendet. Lassen Sie uns ein einfaches Plugin installieren, das Teilen-Plugindie native Share-Dialgog auslöst:

npm i @capacitor/share

Um es zu verwenden, importieren Sie das Paket und rufen Sie die entsprechende Funktion aus unserer App auf. Beachten Sie die share() App.js Nach der Installation eines neuen Plugins vergessen Sie nicht, Ihr React-Projekt erneut zu synchronisieren, indem Sie :

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;

Als nächstes können Sie die App auf iOS und Android mit __CAPGO_KEEP_0__-Navigation und Übergängen so gestalten, dass sie sich nativ anfühlt, und lösen Sie häufige iOS-Layoutprobleme, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen. npx cap sync.

Ein natürlicher Anwendungsbenutzerinterface mit Capgo-Native-Navigation und -Übergängen

Native-feeling UI with Capgo Native Navigation and Transitions

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

Um eine nativ anfühlsame App in einer React + Capacitor-Anwendung zu erstellen, verwenden Sie stattdessen Capgo-Plugins anstelle von web-basierten UI-Kits wie Konsta UI:

• @capgo/capacitor-native-navigations — native Navbar, Liquid Glass-Tastenleiste auf iOS und eine verschwommene Tastenleiste-Stil 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.

Install 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 Liquid Glass-Tastenleiste (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 Ihrer 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 Pages in cap-router-outlet, cap-page, und cap-content, und rufen Sie setDirection('forward') oder setDirection('back') vor der Navigation. Dupliziere 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 (als tailwind-capacitor auf npm). Es bietet safe-areas Nutzen Sie 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 Werkzeuge wie pt-safe, pb-safe, und px-safe anstatt sie manuell zu verteilen. Das Projekt wird aktiv weiterentwickelt – wenn etwas für Ihre React-Einrichtung fehlt, env(safe-area-inset-*) Öffnen Sie ein PR auf __CAPGO_KEEP_0__ open a PR on GitHub.

Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, fügen Sie mehr

oder passen Sie allein die Viewport-Tags an, ist es normalerweise nicht ausreichend. 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 index.html Behandeln Sie den iOS-Safe-Area von einem einzigen Root-Wrapper aus <head>:

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

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

Erstelle eine einzelne App-Shell und füge dort sicherheitsrelevante Padding-Einstellungen 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);
}

Umfasst alle Seite-Inhalte innerhalb von .app-shellVermehrtes sicherheitsrelevantes Padding in Kopfzeilen, Modalen und Layout-Wrappern macht die Benutzeroberfläche oft gekürzt oder zu groß aussehen.

Mit @capgo/tailwind-capacitor kannst du denselben Padding mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf dieser einzelnen Shell ausdrücken.

Setze Capacitor iOS contentInset auf never context: Seite/Bereich: Produktseite für Live-Updates. Rolle: Kurzer Benutzeroberflächentext oder Navigationselement. Nachrichtenschlüssel `live_update_dynamic_label_to` (Live-Update-Dynamischer-Label-Zu).

erst capacitor.config.tsIn diesem Fall bevorzuge native Inset deaktiviert und lasse CSS (oder Native Navigation’s contentInsetMode: 'css'Besitzt man das sichere Bereich:

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

Mischen Sie Capacitor’s automatische Inhaltsabstände mit CSS env(safe-area-inset-*) Ein Paddingsatz ist eine häufige Ursache für doppelte Abstände.

Finden Sie das überlaufende Element

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

In Safari Web Inspector, führen Sie aus:

[...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 wenn möglich. Viele horizontale Überlaufprobleme kommen von 100vw / w-screen, dupliziertem sicheren Bereichs-Paddings oder einem festsitzenden Container – nicht von der Viewport-Meta-Tags selbst.

Zusammenfassung

Capacitor bietet eine nahtlose Möglichkeit, native Apps auf der Grundlage eines bestehenden Web-Projekts zu erstellen, indem ein einfacher Weg zur Verfügung gestellt wird, code zu teilen und eine konsistente Benutzeroberfläche zu haben.

Danke an Technologien wie Capacitor, ist es nie einfacher gewesen, mobile Anwendungen aus React.js-Web-Apps zu erstellen. Nehmen Sie Ihre Web-Entwicklungskenntnisse auf die nächste Ebene, indem Sie beeindruckende native mobile Apps erstellen. Viel Spaß beim Coden!

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

Fortsetzen Sie mit der Erstellung von mobilen Apps mit reinem React.js und Capacitor

Wenn Sie native Medien- und Schnittstellenverhalten planen und mit Building Mobile Apps with Pure React.js and Capacitor verbinden möchten, wenden Sie sich an Using @capgo/capacitor-live-activities um die native Fähigkeit in Using @capgo/capacitor-live-activities zu nutzen, @capgo/capacitor-live-aktivitäten für die Implementierungsdetails in @capgo/capacitor-live-aktivitäten 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.