This tutorial will walk you through crafting a mobile application using React and Capacitor. By the end, you’ll know how to morph a React.js web app into a native mobile application with Capacitor, and add a native feel with Capgo Native Navigation and Transitions.
Capacitor enables the easy transformation of your React.js web app into a native mobile application, requiring no substantial alterations or learning of new strategies such as React Native.
Der Prozess umfasst einige einfache Schritte, und bevor Sie es wissen, ist Ihre React.js-Anwendung eine voll funktionsfähige mobile Anwendung. Bleiben Sie also bei uns, während wir Sie auf dieser Reise begleiten.
Capacitor Überblick
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-Projekte generiert werden. Durch seine Plugins können Sie auch Zugriff auf native Gerätefeatures wie die Kamera über eine JS-Brücke erhalten.
Capacitor offers a straightforward way to create a native mobile application without any hassle or steep learning curve. Its simple API and streamlined functionality make it easy to incorporate into your project.
Einrichten Ihrer React.js-Anwendung
Lassen Sie 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-appUm unser Projekt in eine native mobile App umzuwandeln, benötigen wir export einer unserer App ist erforderlich.
Wir kommen darauf zurück. Zunächst müssen wir verstehen, wie Capacitor in unsere React-App integriert werden kann.
Integrieren von Capacitor in Ihre React.js-App
Die ersten Schritte bei der Einrichtung mögen ein bisschen detailliert sein, aber danach wird das Aktualisieren Ihres native App Wrapper so einfach wie das Ausführen eines sync Kommandos.
Zuerst installieren wir das Capacitor CLI als Entwicklungsabhängigkeit und setzen es innerhalb unseres Projekts ein. 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 an 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 androidDie iOS und android Verzeichnisse sind nun im React.js-Projekt vorhanden.
Um auf das Android-Projekt später zuzugreifen, installieren Sie Android Studio. Für iOS benötigen Sie einen Mac und sollten Xcode.
installieren. 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
}Die Build-Kommandozeile ausführen und Ihr Projekt mit Capacitor synchronisieren.
npm run build
npx cap syncDie npm run build der Befehl wird Ihr React.js-Projekt erstellen, während npx cap sync die Web-code-Komponente an den richtigen Stellen 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-App für die Veröffentlichung 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 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.
Die Capacitor-CLI vereinfacht den Prozess, beide native Projekte zu öffnen:
npx cap open ios
npx cap open androidEinmal Ihre native Projekte eingerichtet, ist das Bereitstellen Ihrer App auf einem verbundenen Gerät ein einfacher Prozess.
For Android Studio wartet man, bis alles geladen ist, und deployt dann die App auf einem verbundenen Gerät.
For Xcode stellst du dein Signaturkonto ein, um die App auf einem echten Gerät zu deployen, anstatt nur auf dem Simulator. Nachdem du das getan hast, drückst du einfach auf 'Play', um die App auf deinem verbundenen Gerät auszuführen, das du oben auswählen kannst.
Wenn alles gut gelaufen ist, hast du deine 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 kannst du das auch mit Capacitor haben, aber auf deinem mobilen Gerät!
Du kannst deine lokal gehostete Anwendung mit Live Reload auf deinem Netzwerk zugänglich machen, indem du die Capacitor-App so einrichtest, dass sie den Inhalt von einer bestimmten URL lädt.
Zuerst bestimmst du deine lokale IP-Adresse. Auf einem Mac kannst du das tun, indem du ipconfig getifaddr en0 im Terminal ausführst. Auf Windows ausführst du ipconfig und suchst nach der IPv4-Adresse.
Nach diesem Schritt instruiert du Capacitor dazu, die App direkt vom Server zu laden, indem du einen weiteren Parameter in deinem capacitor.config.ts file:
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;Benutzen Sie bitte die korrekte IP und Port. Führen Sie npx cap copy um diese Änderungen an unserem native Projekt anzuwenden.
Nachdem Sie Ihre App ein weiteres Mal über Android Studio oder Xcode bereitgestellt haben, 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.
Verwendung von Capacitor-Plugins
Schauen wir uns schnell an, wie man ein Capacitor-Plugin verwendet. Lassen Sie uns ein einfaches Plugin installieren, das Share-Plugin, das den native Share-Dialog auslöst:
npm i @capacitor/shareUm es zu verwenden, importieren Sie das Paket und rufen Sie die entsprechende share() function aus unserer App auf. Beachten Sie 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, Ihre React-Projekt wieder zu synchronisieren mit npx cap sync.
Nächsten können Sie die App so gestalten, dass sie sich auf iOS und Android nativer anfühlt, mit Capgo Navigation und Übergängen, und Probleme mit der horizontalen Überschreitung oder gekürzten sicheren Bereichen auf iOS beheben.
Natürliche Benutzeroberfläche 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.
haben. Für eine natürliche mobile Oberfläche in einer React + Capacitor-Anwendung verwenden Sie stattdessen Capgo-Plugins anstelle von web-basierten UI-Kits wie Konsta UI:
- @capgo/capacitor-native-Navigation — natürliche Navigationsleiste, Liquid Glass-Tastenleiste auf iOS und eine verschwommene Tastenleiste-Stil auf Android. Ihr React-Router behält die Routenstatus; der Plugin besitzt die native Chrome.
- @capgo/capacitor-Übergänge — Seitenübergänge im Ionic-Stil und iOS-Rück-Flutschwung in der WebView-Schicht, ohne Ionic-UI zu übernehmen.
Installieren Sie beide:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncKonfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit das Webinhalts die native Leisten 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 Pages in cap-router-outlet, cap-pageund cap-contentund rufen Sie setDirection('forward') oder setDirection('back') Bevor Sie navigieren. Duplizieren Sie Web-Überschriften oder -Fußzeilen nicht, wenn native Navigation diese Oberflächen besitzt.
Sehen Sie sich die vollständigen Anleitungen an: 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 (publikiert als) tailwind-capacitor auf npm). Es bietet safe-areas utilities und andere Capacitor-freundliche Tailwind-Plugins:
bun add -D tailwind-capacitor, und src/index.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Verwenden Sie Werkzeuge wie pt-safe, pb-safe, and px-safe öffnen Sie ein PR auf __CAPGO_KEEP_0__ env(safe-area-inset-*) von Hand. Das Projekt wird aktiv weiterentwickelt — wenn etwas für Ihre React-Einrichtung fehlt, ein Pull Request auf GitHub öffnen.
iOS-Layout-Probleme beheben (Viewport, Safe Area und horizontale Überschreitung)
Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, fügen Sie mehr overflow-x: hidden oder das Anpassen der viewport-Tags allein hilft normalerweise nicht. Arbeiten Sie durch diese Kontrollen in der Reihenfolge.
Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird.
Fügen Sie die Viewport-Metatag hinzu index.html inside <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Verwenden Sie das iOS-Safe-Area nur von einem Root-Wrapper aus.
Erstellen Sie eine einzelne App-Shell und fügen Sie dort sicherer Bereich-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 Seiteinhalt in ein .app-shellDoppeltes sicherer Bereichs-Puffering in Kopfzeilen, Modalen und Layout-Wrappern macht die Benutzeroberfläche oft gekürzt oder zu groß aussehen.
With @capgo/tailwind-capacitor, Sie können denselben Abstand mit Hilfsfunktionen ausdrücken. pt-safe pb-safe px-safe auf dieser einzelnen Shell.
Setzen Sie Capacitor iOS contentInset zum never first
erst capacitor.config.ts, bevorzugt native Inset disabled und lassen Sie CSS (oder Native Navigation’s contentInsetMode: 'css'Besitzt den sicheren 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-*) Mischen Sie __CAPGO_KEEP_0__’s automatische Inhaltsinset mit CSS
Finden Sie das tatsächlich überlaufende Element
Finden Sie das überlaufende Element aus. 100vw , Tailwind w-screen, eine feste 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,
}));With Tailwind, ersetzen w-screen mit w-full wenn möglich. Viele horizontale Überlaufprobleme kommen von 100vw / w-screen, dupliziertem sicherem Bereich-Puffer oder einem festschaltbaren Container — nicht von der Viewport-Meta-Tags selbst.
Zusammenfassung
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.
Dank 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 Stufe, indem Sie beeindruckende native mobile Apps erstellen. Viel Spaß beim Coden!
Für mehr Informationen darüber, wie Sie Ihren Entwicklungsprozess beschleunigen können registrieren Sie sich für ein kostenloses Konto Heute.
Weitermachen von der Erstellung mobiler Apps mit reinem React.js und Capacitor
Wenn Sie Capgo verwenden Building Mobile Apps with Pure React.js and Capacitor um native Medien und Schnittstellenverhalten zu planen, mit ihm zu verbinden Verwendung von @capgo/capacitor-live-Aktivitäten für die native Fähigkeit in Verwendung von @capgo/capacitor-live-Aktivitäten, @capgo/capacitor-Live-Activities für die Implementierungsdetails in @capgo/capacitor-live-Aktivitäten, Verwendung von @capgo/capacitor-Video-Player für die native Funktion im Verwenden von @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.
