Mobile Apps mit reinem React.js und Capacitor erstellen

In dieser Anleitung werden Sie durch die Schritte geführt, um eine mobile App mit React und Capacitor zu erstellen. Am Ende werden Sie wissen, wie Sie eine React.js-Webanwendung in eine native mobile App umwandeln können, indem Sie Capacitor verwenden, und eine native Atmosphäre mit Capgo Native Navigation und Transitions hinzufügen.

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

Der Prozess umfasst nur wenige einfache Schritte, und bevor Sie es wissen, ist Ihre React.js-Anwendung eine voll funktionsfähige mobile App. 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 Ihre App in eine native WebView einhüllen, während gleichzeitig die native Xcode- und Android-Studio-Projekte erstellt 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 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

Lassen Sie uns den einfachsten Weg wählen, um eine React-Anwendung zu initiieren. Wir werden das 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 werden darauf zurückkommen. Zunächst müssen wir verstehen, wie Capacitor in unsere React-Anwendung integriert werden kann.

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 das Capacitor-CLI als Entwicklungszusammenhang installieren und es innerhalb unseres Projekts einrichten. Während der Einrichtung akzeptieren Sie die Standardwerte für Name und Bundle-ID, indem Sie auf "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 später auf das Android-Projekt zuzugreifen, installieren Sie bitte Android Studio. Für iOS benötigen Sie einen Mac und sollten Xcode.

installieren. Als Nächstes aktualisieren Sie webDir in Ihrem capacitor.config.json als im folgenden Beispiel 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

Die npm run build Der Befehl wird Ihr React.js-Projekt erstellen, während npx cap sync wird die Web code auf den genauen Plätzen der nativen Plattformen ausrichten, damit sie auf einem Gerät 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-Apps erfordert Xcodeund Android-Anwendungen benötigen Android StudioWenn 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.

Das Capacitor CLI vereinfacht den Prozess zum Öffnen beider nativen Projekte:

npx cap open ios
npx cap open android

Sobald Ihre nativen 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 einem verbundenen 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 können Sie das auch mit Capacitor haben, aber auf Ihrem Mobilgerät!

You can make your locally hosted application accessible with live reload on your network by having the Capacitor app load the content from a specific URL.

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

Nach diesem Schritt instruieren Sie Capacitor dazu, die App direkt vom Server zu laden, indem Sie ein weiteres Parameter zu Ihrem 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;

Stellen Sie sicher, dass Sie die genaue IP-Adresse und den Port verwenden. Ausführen npx cap copy um diese Änderungen an unserem native Projekt anzuwenden.

Bei der Wiederverteilung Ihrer App ein weiteres Mal über Android Studio oder Xcode werden alle Änderungen in Ihrer React-App automatisch neu geladen und auf Ihrer App angezeigt!

Beachten Sie jedoch, 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

Lassen Sie uns einen kurzen Blick auf die Verwendung eines Capacitor-Plugins werfen. Lassen Sie uns ein einfaches Plugin installieren, das Teilen-PluginDas native Teilen öffnet das Dialogfeld.

npm i @capacitor/share

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

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 anfühlen lassen, als wäre sie native, und lösen Sie häufige iOS-Ansichten, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen. npx cap sync.

Natürlicher Anblick 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..

Für einen nativen mobilen Anblick in einer React + Capacitor-App verwenden Sie stattdessen Capgo-Plugins anstelle von nur im Web verfügbaren UI-Kits wie Konsta UI:

• @capgo/capacitor-native-Navigation — native Navbar, Liquid Glass-Tasteleiste auf iOS und eine getönte Tasteleiste-Style auf Android. Ihre React-Router behält die Routen-Zustand; der Plugin besitzt die native Chrome.
• @capgo/capacitor-Übergänge — 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 das 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 Liquid Glass-Tasteleiste (iOS verwendet die System-eigene Rendering; Android verwendet eine getönte 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>;
}

Wrappeiten Sie die gerouteten Seiten in cap-router-outlet, cap-page, und cap-content, und rufen Sie setDirection('forward') oder setDirection('back') Bevor Sie navigieren. Duplizieren Sie Web-Über- und 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 Gerätesichere Bereiche in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (als tailwind-capacitor veröffentlicht auf npm). Es bietet safe-areas Hilfsfunktionen 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 env(safe-area-inset-*) manuell zu verteilen. Das Projekt wird aktiv weiterentwickelt — wenn etwas für Ihre React-Einrichtung fehlt, einen PR auf GitHub.

iOS-Layoutprobleme beheben (Viewport, sichere Fläche und horizontale Überschuss)

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

Stellen Sie sicher, dass der Viewport-Meta-Tag korrekt angewendet wird

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

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

Behandeln Sie die iOS-sichere Fläche von einem einzigen Root-Wrapper aus

Erstellen Sie ein einzelnes App-Shell und fügen Sie dort sicherheitsrelevante Padding hinzu — 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);
}

Alle Seiteninhalte innerhalb von .app-shell. Doppeltes sicherheitsrelevantes Padding in Kopfzeilen, Modalen und Layout-Wrappern macht die Benutzeroberfläche oft gekürzt oder zu groß aussehen.

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

Setzen Sie Capacitor iOS contentInset auf never erst

In capacitor.config.ts, bevor Sie native Inset deaktivieren und lassen Sie CSS (oder Native Navigation’s contentInsetMode: 'css'Eigene 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 Paddings 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 fixe Pixelbreite oder eine große min-width.

In Safari Web Inspector, ausführen Sie:

[...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, duplizierten sicheren Bereichs-Paddings oder einem fixbreiten Container — nicht von der Viewport-Meta-Tags selbst.

targetLanguage":"Deutsch","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Zusammenfassung","__CAPGO_KEEP_0__ bietet eine nahtlose Möglichkeit, native Apps auf der Basis eines bestehenden Web-Projekts zu erstellen, indem eine einfache Möglichkeit zur Verfügung gestellt wird, __CAPGO_KEEP_1__ zu teilen und eine konsistente Benutzeroberfläche zu haben.","Dank Technologien wie __CAPGO_KEEP_0__ ist es nie einfacher gewesen, mobile Anwendungen aus React.js-Web-Apps zu erstellen. Nehmen Sie Ihre Web-Entwicklungs-Fähigkeiten auf die nächste Stufe, indem Sie beeindruckende native mobile Apps erstellen. Viel Spaß beim Coden!","Für weitere Informationen darüber, wie Sie Ihren Entwicklungsprozess beschleunigen können,","sich für ein kostenloses Konto anmelden","heute","Fortsetzen Sie von Building Mobile Apps with Pure React.js und __CAPGO_KEEP_0__","Wenn Sie native Medien- und Schnittstellenverhalten planen, verbinden Sie es mit","Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-aktivitäten","für die native Fähigkeit in Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-aktivitäten"]

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!

protectedTokens texts Zusammenfassung

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

Dank Technologien wie __CAPGO_KEEP_0__ ist es nie einfacher gewesen, mobile Anwendungen aus React.js-Web-Apps zu erstellen. Nehmen Sie Ihre Web-Entwicklungs-Fähigkeiten auf die nächste Stufe, indem Sie beeindruckende native mobile Apps erstellen. Viel Spaß beim Coden! Building Mobile Apps with Pure React.js and Capacitor sich für ein kostenloses Konto anmelden Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @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.