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ätefeatures wie die Kamera über eine JS-Brücke erhalten.

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

Die Einrichtung Ihrer React.js-Anwendung

Lassen Sie 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 ein export von unserer App erforderlich.

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

Capacitor in Ihre React.js Anwendung integrieren

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

Zuerst installieren wir das Capacitor CLI als Entwicklungsabhängigkeit 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 Ihrer React.js Anwendung vorhanden.

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

Als Nächstes aktualisieren Sie das webDir in Ihrem capacitor.config.json Datei wie unten gezeigt:

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

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

npm run build
npx cap sync

Der npm run build Befehl wird Ihr React.js-Projekt erstellen, während npx cap sync wird die Web code in den genauen Orten der nativen Plattformen ausrichten, damit sie in einer App ausgeführt werden können.

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

Erstellen und Bereitstellen Ihrer nativen Apps

Die Entwicklung von iOS-Apps erfordert Xcode, und Android-Apps benötigen Android Studio. Wenn Sie beabsichtigen, Ihre App im App-Store zu verteilen, 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 das Bereitstellen 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-Web-App in eine native mobile Anwendung umgewandelt!

Capacitor Live Reload

Moderne Entwicklungsframeworks haben normalerweise 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 dazu bringst, die Inhalte von einer bestimmten URL zu laden.

Zuerst bestimmst du deine lokale IP-Adresse. Auf einem Mac kannst du das tun, indem du ipconfig getifaddr en0 in der Terminal-Anwendung ausführst. Auf Windows ausführst du ipconfig und suchst nach der IPv4-Adresse.

Nach diesem Schritt instruierst du 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;

Stelle sicher, dass du die genaue IP-Adresse und den Port verwendest. Ausführst du npx cap copy um diese Änderungen auf unserem native Projekt anzuwenden.

Bei der Wiederverteilung deiner App noch einmal über 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 Neuverarbeitung Ihres native Projekts erforderlich ist. Dies liegt daran, dass die native Dateien geändert wurden und nicht auf der Fliege aktualisiert werden können.

Verwenden Sie Capacitor Plugins

Lassen Sie uns einen Blick darauf werfen, wie man ein Capacitor Plugin verwendet. Lassen Sie uns ein einfaches Plugin installieren, nämlich das Teilen-Plugin, das den native Teilen-Dialog auslöst:

npm i @capacitor/share

Um es zu verwenden, importieren Sie das Paket und rufen Sie die entsprechende share() Funktion aus unserem App. Überlegen Sie sich 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 nicht, Ihr React-Projekt erneut 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 gestalten und häufige iOS-Anzeige-Probleme lösen, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen.

Natürliche UI mit Capgo Native Navigation und Übergängen

Ich habe Jahre lang mit Ionic um cross-plattform-Anwendungen zu erstellen, aber die Integration mit React ist umständlich und selten lohnenswert, wenn Sie bereits Tailwind CSS.

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 — nativere Leiste, 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 — Ionic-Style-Seitenübergänge und iOS-Rückwärts-Schub auf 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-Content die native Leisten respektiert:

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

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

Rendern Sie eine Liquid Glass-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>;
}

Weggerollte Seiten in cap-router-outlet, cap-page, und cap-content, und aufrufen setDirection('forward') oder setDirection('back') vor der Navigation. Dupliziere Web-Header oder -Footer nicht, wenn native Navigation diese Oberflächen besitzt.

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

Sichere Bereiche mit Tailwind

Für Gerätesichere Bereiche 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, Öffnen Sie ein PR auf GitHub.

iOS-Layoutprobleme beheben (Viewport, Safe Area und horizontale Überschreitung)

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

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

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

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

Behandeln Sie den sicheren Bereich von iOS aus einer einzigen Root-Wrapper heraus

Erstellen Sie ein einzelnes App-Shell und fügen Sie dort den sicheren Bereich ein — 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 Seiteninhalte innerhalb .app-shellDoppelte sichere-Raum-Padding in Kopfzeilen, Modalen und Layout-Wrapper macht die Benutzeroberfläche oft gekürzt oder zu groß aussehen.

Mit @capgo/tailwind-capacitor, können Sie denselben Abstand mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf diesem einzelnen Shell.

Setzen Sie Capacitor iOS contentInset zum never erst

In capacitor.config.ts, bevorzugt native Eingabefelder deaktivieren 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: 'build',
  ios: {
    contentInset: 'never',
  },
};

Mischen Sie Capacitor’s automatische Inhaltsabstand mit CSS env(safe-area-inset-*) padding ist eine häufige Ursache für doppelten Abstand.

Finden Sie das überlaufende Element

Der übliche Täter ist ein Element, das 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 Sie w-screen wenn möglich. Viele horizontale Überlaufprobleme kommen von w-full , dupliziertem sicheren Bereichsabstand oder einem festen Breitencontainer — nicht von der Viewport-Meta-Tags selbst. 100vw / w-screenZusammenfassung

__CAPGO_KEEP_0__ 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, __CAPGO_KEEP_1__ zu teilen und eine konsistente Benutzeroberfläche zu haben.

Capacitor offers a seamless means of building native apps based on an existing web project, providing a simple way to share code and have consistent UI.

Thanks to technologies like Capacitor, building mobile applications from React.js web apps has never been easier. Take your web development skills to the next level by crafting impressive native mobile apps. Happy coding!

registrieren Sie sich für ein kostenloses Konto heute. Fortsetzen Sie von Building Mobile Apps with Pure React.js und __CAPGO_KEEP_0__

Wenn Sie Capacitor verwenden

Wenn Sie __CAPGO_KEEP_0__ verwenden Mit reinem React.js Mobile-Apps erstellen und Capacitor um native Medien und Schnittstellenverhalten zu planen und es mit Mit @capgo/capacitor-live-aktivitäten für die native Fähigkeit in Mit @capgo/capacitor-live-aktivitäten, @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-navigations für die native Fähigkeit in Mit @capgo/capacitor-native-navigations.