Building Mobile Apps with React and Capacitor

In diesem Tutorial beginnen wir 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.

Dieses Tutorial führt Sie durch den Prozess, beginnend mit einer neuen React-Anwendung und dann die Einbindung von __CAPGO_KEEP_0__ zur Einführung in die Welt der native mobile Apps. Sie können auch __CAPGO_KEEP_1__ Native Navigation, Transitions und tailwind-__CAPGO_KEEP_2__ für sichere Bereiche verwenden.

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

Mit __CAPGO_KEEP_0__ erhalten Sie eine fantastische native mobile App ohne einen komplizierten Setup oder einen steilen Lernkurve. Seine schlanken __CAPGO_KEEP_1__ und gestreamten Funktionalitäten machen es ein Kinderspiel, es in Ihr Projekt zu integrieren. Vertrauen Sie mir, Sie werden sich wundern, wie leicht es ist, eine voll funktionsfähige native App mit __CAPGO_KEEP_2__ zu erreichen!

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!

React-Anwendung

Während es verschiedene Methoden gibt, um React-Anwendungen zu initiieren, wählen wir in diesem Tutorial die einfachste Methode, die eine leere React-Anwendung bietet:

npx create-react-app my-app

Um eine native mobile App zu erstellen, benötigen wir ein export Unser Projekts. Daher fügen wir ein einfaches Skript in unserem package.json ein, das verwendet werden kann, um die React-App 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 ausführen, und Sie sollten ein frisches Verzeichnis npm run build out

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

Adding Capacitor to Your React App

__CAPGO_KEEP_0__ sync genutzt, aber für den Moment müssen wir es richtig einrichten.

Zunächst können wir das Capacitor CLI als Entwicklungspaket installieren und dann innerhalb unseres Projekts einrichten. Während der Einrichtung können Sie mit der Eingabe der Taste "Enter" die Standardwerte für Name und Bundle-ID 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

Bis zu diesem Punkt sollten Sie neue ios und android Ordner in Ihrem React-Projekt beobachten können.

Das sind echte native Projekte!

Um später auf das Android-Projekt zuzugreifen, müssen Sie 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 enthalten, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist

webDir capacitor.config.json , die auf das Ergebnis Ihres Build-Befehls verweisen muss. Derzeit ist sie 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 nativen Plattformen, damit sie in einer App angezeigt werden können.

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

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

Erstellen und Bereitstellen von nativen 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 echten Gerät bereitzustellen, anstatt nur auf dem Simulator. Wenn Sie das noch nicht getan 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 Ihre React-Web-App erfolgreich 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 dieselbe Funktionalität auf einem mobilen Gerät mit minimalen Anstrengungen haben kannst!

Zugriff auf deine lokal gehostete Anwendung mit Live Reload auf deinem Netzwerk erlangen, indem du die Capacitor App so einrichtest, dass sie die Inhalte von der spezifischen URL lädt.

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 such 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 hinzufügen:

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 kopieren

npx cap copy

Die copy Kommando ist ähnlich wie sync, aber es wird nur die Änderungen im Web-Ordner und Konfiguration kopieren, ohne das natives Projekt zu aktualisieren Sie können Ihre App nun noch einmal über Android Studio oder Xcode bereitstellen. Anschließend wird, wenn Sie etwas in Ihrer React-App ändern

die App automatisch neu laden und die Änderungen anzeigen! and show the changes!

Bedenken Beachten Sie, dass bei der Installation neuer Plugins wie der Kamera eine Neuverteilung Ihres nativen Projekts erforderlich ist. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Flugschleife 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

Lassen Sie uns nun einen Blick darauf werfen, wie man ein Capacitor-Plugin in Aktion verwendet, das wir bereits mehrfach erwähnt haben. Um dies zu tun, können wir ein ziemlich einfaches Plugin installieren, indem wir folgende Befehle ausführen:

npm i @capacitor/share

Es gibt nichts Besonderes an dem Teilen-Plugin, aber es bringt trotzdem den nativen Teilen-Dialog auf. Dazu müssen wir nun nur noch das Paket importieren und die share() Funktion in unserer App aufrufen. Lassen Sie uns nun die src/App.js in folgende Zeile ändern:

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;

Wie bereits erwähnt, müssen wir bei der Installation neuer Plugins eine Synchronisationsoperation durchführen und das App dann auf unserem Gerät neu bereitstellen. Um dies zu tun, 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 auf iOS und Android mit Capgo-Navigation und -Übergängen noch nativer anfühlen lassen und häufige iOS-Anordnungsprobleme lösen, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen.

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

Jahre lang habe ich 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ückblende am Rand ohne die Adoption der Ionic-UI.

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

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-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 als tailwind-capacitor npm safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

Nützliche Funktionen und andere __CAPGO_KEEP_0__-freundliche Tailwind-Plugins: src/index.css:

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

In pt-safe, pb-safeVerwenden Sie nützliche Funktionen wie px-safe und 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);
}

Zweifache sichere-Flächenabstände in Kopfzeilen, Modalen und Layout-Wrapper machen die Benutzeroberfläche oft gekürzt oder zu groß aus. .app-shellFixing iOS Layout Issues (Viewport, Safe Area, and Horizontal Overflow)

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 man native inset disabled und lassen Sie CSS (oder Native Navigation’s contentInsetMode: 'css') den sicheren Bereich besorgen:

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

Mischen Sie Capacitor’s automatische Inhaltsabstände mit CSS env(safe-area-inset-*) abstand verursacht doppelten Abstand.

Finden Sie das echte ü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 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 sicherem Bereich-Padding 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 Zugabe von CapgoEs ist sogar einfacher, Live-Updates in Ihre App hinzuzufügen, damit Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.

Wenn Sie gerne wissen möchten, wie Sie Capgo in Ihre React-App hinzufügen können, nehmen Sie einen Blick auf das nächste Artikel:

Fortsetzen Sie mit Building Mobile Apps mit React und Capacitor

Wenn Sie __CAPGO_KEEP_0__ verwenden Building Mobile Apps mit React und Capacitor um die CI/CD-Automatisierung zu planen, verbinden Sie es mit __CAPGO_KEEP_0__ CI/CD Capgo CI/CD für den Produktworkflow in Capgo CI/CD Capgo Native Builds für den Produktworkflow in Capgo Native Builds Capgo Integrations for the product workflow in Capgo Integrations, CI/CD-Integration für die Implementierungsdetails in CI/CD-Integration, und GitHub Actions Integration for the implementation detail in GitHub Actions Integration.