Building Mobile Apps with React and Capacitor

Wir beginnen mit einer neuen React app and transition to native mobile development using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.

Capacitor allows you to easily convert your React web application into a native mobile app without significant modifications or learning a new skill like React Native.

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

This tutorial will guide you through the process, starting with a new React app and then incorporating Capacitor to move into the realm of native mobile apps. You can also use Capgo Native Navigation, Transitions, and tailwind-capacitor for safe areas.

About Capacitor

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

With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!

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 liefert:

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 das React-Projekt 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 npm run build ausführen und sollten ein frisches Verzeichnis namens

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

Adding Capacitor to Your React App

verwendet, aber für den Moment müssen wir es korrekt einrichten. sync __CAPGO_KEEP_0__ in Ihre React-Anwendung hinzufügen:

Zunächst 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: Seite/ Bereich: Capgo-Marketing-Website. Rolle: Kurze Benutzeroberflächenschaltfläche oder Navigationspunkt. Ansehen: Seite trust.astro. Nachrichtsschlüssel `and` (Und). android

Ordner in Ihrem React-Projekt beobachten können.

Das sind echte native Projekte! 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 enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist der

webDir capacitor.config.json , der auf das Ergebnis Ihres Build-Befehls verweisen muss. Derzeit ist dies jedoch falsch. Um dies zu korrigieren, öffnen Sie das :

{
  "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 native Plattformen, damit sie in einer App angezeigt werden können.

Zusätzlich kann der Synchronisierungs-Befehl die native Plattformen aktualisieren und Plugins installieren, sodass, wenn Sie ein neues Capacitor-Plugin installieren, es Zeit ist, npx cap sync erneut auszuführen.

Ohne es zu merken, sind Sie jetzt tatsächlich fertig, also sehen wir das App auf einem Gerät!

Erstellen und Bereitstellen von native Apps

Um iOS-Apps zu entwickeln, benötigen Sie 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 für iOS im Apple Developer Programm und für Android im Google Play Console 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 realen 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 im Developer Programm 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 dasselbe Funktionalität auf einem mobilen Gerät mit minimalen Anstrengungen!

Zugriff auf deine lokal gehostete Anwendung mit Live Reload auf deinem Netzwerk indem du die Capacitor App laden lässt, die Inhalte von der spezifischen URL.

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:

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 übernehmen:

npx cap copy

Der copy Befehl ähnelt sich sync, aber er wird nur die Änderungen im Web-Ordner und der Konfiguration übernehmen, 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! Die Änderungen werden nur im Web-Ordner und der Konfiguration übernommen, ohne das natives Projekt zu aktualisieren. Sie können Ihre App nun ein weiteres Mal über Android Studio oder Xcode bereitstellen.

Bitte beachten Sie dass eine Neuinstallation von Plugins wie der Kamera eine Neuverarbeitung Ihres native Projekts erfordert. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Flugschleuse 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

Zur Verdeutlichung zeigen wir Ihnen nun, wie man ein Capacitor-Plugin in Aktion verwendet. Dazu können wir ein einfaches Plugin 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. Dazu müssen wir nun nur noch das Paket importieren und die share() Funktion in unserer App aufrufen. Lassen Sie uns das src/App.js anpassen.

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;

Zusammenfassend gesagt, müssen wir bei der Installation neuer Plugins eine Synchronisationsoperation durchführen und das App dann auf unserem Gerät neu deployen. Dazu führen Sie bitte folgenden Befehl aus:

npx cap sync

Auf Knopfdruck können Sie das schöne native Teilen-Dialog sehen!

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

Natürlicher Anwendungsdesign mit Capgo-Native-Navigation und -Übergängen

Ich habe Jahre lang mit Ionic gearbeite, um cross-plattformische 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:

• Für einen nativen mobilen Look in einer React + capgo-Anwendung verwenden Sie stattdessen capacitor-Plugins anstelle von web-only-UI-Kits wie Konsta UI: @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation
• @capgo/capacitor-transitions --- Ionische-Seiten-Übergänge und iOS-Rück-Übergehen am Rand 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 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 flüssige Glas-Tastenleiste (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 Using @capgo/capacitor-native-navigation und Mit @capgo/capacitor-Übergängen.

Sichere Bereiche mit Tailwind

Für sichere Bereiche auf Geräten in Tailwind CSS verwenden Sie (@capgo/tailwind-capacitor) veröffentlicht auf __CAPGO_KEEP_0__ tailwind-capacitor on npm). It provides safe-areas Nutzbarkeiten 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 Nutzbarkeiten wie pt-safe, pb-safeund px-safe anstatt, sie zu verstreuen env(safe-area-inset-*) von 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 es oft nicht, nur den Viewport-Tag anzupassen. Arbeiten Sie durch diese Kontrollen in der Reihenfolge. overflow-x: hidden Stellen Sie sicher, dass der Viewport-Meta-Tag korrekt angewendet wird

Fügen Sie den Viewport-Meta-Tag in

innerhalb index.html Behandeln Sie die sichere Fläche von iOS aus einer einzigen Root-Wrapper <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ächenabstände an — nicht in mehreren verschachtelten Komponenten:

Umgeben Sie alle Seiteninhalte innerhalb

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ächenabstand in Kopfzeilen, Modalen und Layout-Wrapper macht die Benutzeroberfläche oft gekürzt oder zu groß aus. .app-shellZweifacher sichere-Flächenabstand in Kopfzeilen, Modalen und Layout-Wrapper macht die Benutzeroberfläche oft gekürzt oder zu groß aus.

With @capgo/tailwind-capacitor, Sie können denselben Abstand 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 Inhaltseinsatz mit CSS env(safe-area-inset-*) Padding 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 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, dupliziertem sicheren Bereichsabstand 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, sodass 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, nehmen Sie einen Blick auf das nächste Artikel:

Fortsetzen Sie mit Building Mobile Apps with React und Capacitor

Wenn Sie Building Mobile Apps with React und __CAPGO_KEEP_0__ verwenden Building Mobile Apps with React und Capacitor __CAPGO_KEEP_0__ CI/CD Capgo CI/CD für das Produktworkflow in Capgo CI/CD Capgo Native Builds Capgo Native Builds für das Produktworkflow in Capgo Native Builds Capgo Integrations Capgo zur Produktworkflow in Capgo Integrations, CI/CD-Integration context":"Page/area: Capgo Builder / native cloud build product page. Role: Short UI label or navigation item. Message key `native_build_feature_ci_cd` (Native Build Feature Ci Cd)." GitHub Actions Integration GitHub Aktionen-Integration