Building Mobile Apps with Pure React.js and Capacitor

Questa guida ti guiderà nella creazione di un'applicazione mobile utilizzando React e Capacitor. Alla fine, saprai come trasformare un'app web React.js in un'applicazione mobile nativa con Capacitor, e aggiungere un tocco di realismo con Capgo Navigazione e Transizioni native.

Capacitor consente la trasformazione facile della tua app web React.js in un'applicazione mobile nativa, richiedendo nessuna sostanziale alterazione o apprendimento di nuove strategie come React Native.

Il processo coinvolge pochi passaggi semplici, e prima di rendersene conto, la tua app React.js sarà una completa applicazione mobile. Quindi, rimani con noi mentre ti guideremo in questo viaggio.

Panoramica di Capacitor

CapacitorJS è un vero cambiamento. Può integrarsi facilmente con qualsiasi progetto web e avvolgere la tua app in un webview nativo mentre genera il progetto Xcode e Android Studio nativo. Inoltre, attraverso i suoi plugin, puoi accedere alle funzionalità del dispositivo nativo come la fotocamera tramite un ponte JS.

Capacitor offre un modo semplice per creare un'applicazione mobile nativa senza alcun problema o curva di apprendimento ripida. La sua semplice API e funzionalità streamlinata rendono facile l'integrazione nel tuo progetto.

Configurazione dell'App React.js

Vediamo il metodo più semplice per avviare un'applicazione React. Utilizzeremo il gestore di pacchetti npm per creare una nuova app React:

npx create-react-app my-app

Per trasformare il nostro progetto in un'app mobile nativa, un esporta È richiesta una certa quantità di nostra app.

Ritorneremo a questo momento. In primo luogo, capiamo come integrare Capacitor nella nostra app React.

Integrare Capacitor nella tua App React.js

I passaggi di configurazione iniziali potrebbero essere un po' dettagliati, ma dopo di che, aggiornare il tuo wrapper di app nativa diventa semplice come eseguire un sync comando.

In primo luogo, installeremo il Capacitor CLI come dipendenza di sviluppo e lo configureremo nel nostro progetto. Durante la configurazione, accetta i valori predefiniti per nome e ID bundle premendo “invio”.

Successivamente, installeremo il pacchetto core e i pacchetti pertinenti per le piattaforme iOS e Android.

Infine, aggiungeremo le piattaforme e Capacitor creerà cartelle per ogni piattaforma nella radice del nostro progetto:

# 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

Il iOS e context Direttori sono ora presenti nel tuo progetto React.js.

Per accedere al progetto Android in seguito, installa Android Studio. Per iOS, hai bisogno di un Mac e dovresti installare Xcode.

Successivamente, aggiorna il webDir nel tuo file capacitor.config.json come mostrato di seguito:

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

Run the build command and sync your project with Capacitor:

npm run build
npx cap sync

__CAPGO_KEEP_0__: npm run build La __CAPGO_KEEP_0__ eseguirà il comando per costruire il tuo progetto React.js, mentre npx cap sync allineerà il web code nei posti precisi delle piattaforme native affinché possano essere eseguiti in un'app.

Ora, con un po' di fortuna e nessun errore, il tuo app React.js dovrebbe essere pronto per essere lanciato su un dispositivo!

Costruire e Distribuire le Tue App Native

Sviluppare app iOS richiede Xcode, mentre le app Android necessitano di Android Studio. Se hai in programma di distribuire la tua app sul negozio di app, devi iscriverti al programma di sviluppatore Apple per iOS e al Google Play Console per Android.

La Capacitor CLI semplifica il processo di apertura di entrambi i progetti native:

npx cap open ios
npx cap open android

Dopo aver configurato i progetti native, il processo di distribuzione dell'app su un dispositivo connesso è semplice.

Per Android Studio, attendi che tutto si carichi e poi distribuisci l'app su un dispositivo connesso.

For Xcode, stabilisci la tua account di firma per distribuire l'applicazione su un dispositivo reale anziché solo sul simulatore. Dopo aver fatto ciò, basta cliccare su 'play' per eseguire l'applicazione sul tuo dispositivo connesso, che puoi scegliere in alto.

Se tutto è andato bene, avrai convertito la tua applicazione web React.js in un'applicazione mobile nativa!

Capacitor Live Reload

Il framework di sviluppo moderno solitamente include il ricollegamento caldo, e fortunatamente, puoi avere lo stesso con Capacitor ma su il tuo dispositivo mobile!

Puoi rendere la tua applicazione ospitata localmente accessibile con il ricollegamento caldo sul tuo network facendo in modo che l'app Capacitor carichi il contenuto da una specifica URL.

Prima di tutto, determina l'indirizzo IP locale. Su un Mac, puoi farlo eseguendo ipconfig getifaddr en0 in terminale. Su Windows, esegui ipconfig e cerca l'indirizzo IPv4.

Dopo di ciò, istruisci Capacitor a caricare l'app direttamente dal server aggiungendo un altro parametro al tuo 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;

Assicurati di utilizzare l'indirizzo IP e il port corretti. Esegui npx cap copy per applicare queste modifiche al nostro progetto nativo.

Una volta distribuito nuovamente il tuo'app tramite Android Studio o Xcode, qualsiasi modifica nell'app React verrà automaticamente ricaricata e visualizzata sul tuo'app!

Tieni presente che se vengono installati nuovi plugin, come ad esempio la fotocamera, è necessario ricostruire il tuo progetto nativo. Ciò è dovuto al fatto che i file nativi sono stati modificati e non possono essere aggiornati in tempo reale.

Utilizzo dei Capacitor Plugins

Ecco un esempio di come utilizzare un Capacitor plugin. Installiamo un plugin semplice, il Plugin di condivisione, che sollecita il dialogo di condivisione nativo:

npm i @capacitor/share

Per utilizzarlo, importa il pacchetto e chiama la rispettiva share() funzione dall'app. Considera il file 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;

Dopo l'installazione di un nuovo plugin, ricorda di sincronizzare nuovamente il progetto React utilizzando npx cap sync.

Infine, puoi rendere l'app più nativa su iOS e Android con Capgo navigazione e transizioni, e risolvi i problemi di layout comuni su iOS che causano overflow orizzontale o aree sicure tagliate.

Interfaccia utente con un sentore nativo con Capgo Navigazione e Transizioni native

Ho lavorato per anni con Ionic per costruire applicazioni cross-platform, ma integrarla con React è un po' complicato e non vale la pena quando già hai Tailwind CSS.

Per un sentore mobile nativo in un'app React + Capacitor, utilizza invece i plugin Capgo al posto di kit UI web come Konsta UI:

• @capgo/capacitor-navigazione-nativa – barra di navigazione nativa, Liquid Glass bar delle schede su iOS e stile di barra delle schede sfocata su Android. Il tuo router React mantiene lo stato delle rotte; il plugin gestisce la barra di navigazione nativa.
• @capgo/capacitor-transizioni – transizioni di pagina dello stile Ionic e swipe indietro su iOS nel layer WebView, senza adottare l'interfaccia UI di Ionic.

Installa entrambi:

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

Configura la navigazione nativa con modalità CSS inset per far rispettare il contenuto web le barre native:

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

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

Visualizza una barra di navigazione in vetro liquido (iOS utilizza la rendering di sistema; Android utilizza un sfondo di WebView sfocato):

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}`);
});

Aggiungi transizioni di pagina native nel tuo shell dell'app:

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>;
}

Avvolgi le pagine di routing in cap-router-outlet, cap-pagee cap-contente chiama setDirection('forward') o setDirection('back') Prima di navigare. Non duplicare i titoli o i piedi di pagina web quando la navigazione nativa possiede queste superfici.

Vedi le guide complete: Utilizzare @capgo/capacitor-navigazione nativa e Utilizzare @capgo/capacitor-transizioni.

Sedi sicure con Tailwind

For le aree sicure del dispositivo in Tailwind CSS, utilizza @capgo/tailwind-capacitor (pubblicato come tailwind-capacitor su npm). Fornisce safe-areas utilità e altre Capacitor-compatibili estensioni di Tailwind:

bun add -D tailwind-capacitor

In src/index.css:

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

Utilizza utilità come pt-safe, pb-safe, e px-safe al posto di aggiungerle env(safe-area-inset-*) manualmente. Il progetto è attivamente sviluppato — se qualcosa manca per la tua configurazione React, apri un PR su GitHub.

Risolvere i problemi di layout di iOS (Viewport, Area sicura, e sovrapposizione orizzontale)

Se il contenuto sembra essere tagliato, spostato o scorrevole orizzontalmente su iOS, aggiungere più overflow-x: hidden o regolare la riga tag viewport da solo non risolve di solito il problema. Lavora attraverso questi controlli in ordine.

Assicurati che la meta tag viewport sia applicata correttamente

Aggiungi la meta tag viewport in index.html all'interno <head>:

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

Gestisci l'area di sicurezza di iOS da un wrapper radice solo

Crea un unico contenitore dell'applicazione e applica il padding dell'area di sicurezza lì — non in componenti nidificati multipli:

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);
}

Avvolgi tutto il contenuto della pagina all'interno .app-shelldi. Il padding duplicato dell'area di sicurezza nei titoli, nei modali e nei contenitori di layout spesso fa sembrare l'interfaccia utente tagliata o troppo grande.

Con @capgo/tailwind-capacitorpuoi esprimere lo stesso padding con utilità come pt-safe pb-safe px-safe On quel singolo shell.

Imposta Capacitor iOS contentInset A never primo

In capacitor.config.ts, preferisci l'ingombro nativo disabilitato e lascia che CSS (o la navigazione nativa) gestisca l'area sicura: contentInsetMode: 'css'Mescolare l'ingombro automatico di contenuto di __CAPGO_KEEP_0__ con CSS

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

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) Trova l'elemento che sta effondando realmente

L'elemento colpevole è spesso un elemento che utilizza

, Tailwind 100vwpreferisci w-screenuna larghezza di pixel fissi, o una grande min-width.

In Safari Web Inspector, esegui:

[...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,
  }));

Sostituisci con w-screen quando possibile. Molti problemi di sovrapposizione orizzontale derivano da w-full , sovrapposizione di padding di area sicura duplicata, o da un contenitore di larghezza fissata — non dal tag meta viewport stesso. 100vw / w-screenConclusioni

__CAPGO_KEEP_0__ offre un mezzo senza soluzione di continuità per creare applicazioni native basate su un progetto web esistente, fornendo un modo semplice per condividere __CAPGO_KEEP_1__ e avere un'interfaccia utente coerente.

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!

iscrivi un account gratuito oggi. Per ulteriori informazioni su come puoi accelerare il tuo processo di sviluppo dell'applicazione, iscriviti a un account gratuito oggi.

Continua da Building Mobile Apps con React.js e Capacitor

Se stai utilizzando Building Mobile Apps con React.js e Capacitor per pianificare il comportamento dei media e dell'interfaccia nativi, connettilo con Utilizzare @capgo/capacitor-live-attività per la capacità nativa in Utilizzare @capgo/capacitor-live-attività @capgo/capacitor-live-attività per il dettaglio di implementazione in @capgo/capacitor-live-attività Utilizzare @capgo/capacitor-player-video per la capacità nativa in Utilizzare @capgo/capacitor-player-video @capgo/capacitor-player-video per il dettaglio di implementazione in @capgo/capacitor-player-video e Utilizzando @capgo/capacitor-navigazione nativa per la capacità nativa in Utilizzando @capgo/capacitor-navigazione nativa.