Création d'applications mobiles avec React.js et Capacitor

Cet article vous guidera dans la création d'une application mobile en utilisant React et Capacitor. À la fin, vous saurez comment transformer une application web React.js en application mobile native avec Capacitor, et ajouter un sentiment natif avec Capgo Navigation native et transitions.

Capacitor facilite la transformation facile de votre application web React.js en application mobile native, nécessitant aucune modification substantielle ou apprentissage de nouvelles stratégies comme React Native.

Le processus implique quelques étapes simples, et avant de le savoir, votre application React.js sera une application mobile fonctionnelle. Alors, restez avec nous tout au long de ce voyage.

Présentation de Capacitor

CapacitorJS est un véritable changement de cap. Il peut s'intégrer de manière fluide à tout projet web et envelopper votre application dans une vue web native tout en générant les projets Xcode et Android Studio natifs. De plus, grâce à ses plugins, vous pouvez accéder aux fonctionnalités de l'appareil natif comme la caméra via un pont JS.

Capacitor offre une méthode directe pour créer une application mobile native sans aucune difficulté ou courbe d'apprentissage raide. Sa simple API et sa fonctionnalité épurée rendent facile son incorporation dans votre projet.

Mise en place de votre application React.js

Commençons par la méthode la plus simple pour initier une application React. Nous utiliserons le gestionnaire de packages npm pour créer une nouvelle application React :

npx create-react-app my-app

Pour transformer notre projet en application mobile native, un export de notre application est requis.

Nous reviendrons sur cela dans un moment. Tout d'abord, comprenons comment intégrer Capacitor dans notre application React.

Intégration de Capacitor dans votre application React.js

Les étapes de mise en place initiale peuvent être un peu détaillées, mais après cela, la mise à jour de votre enveloppe d'application native devient aussi simple que de lancer un sync commande.

Premièrement, nous installerons le Capacitor CLI en tant que dépendance de développement et le configurerons dans notre projet. Lors de la configuration, acceptez les valeurs par défaut pour le nom et l'ID de l'ensemble en appuyant sur « entrée ».

Ensuite, nous installerons le package de base et les packages pertinents pour les plateformes iOS et Android.

Enfin, nous ajouterons les plateformes, et Capacitor créera des dossiers pour chaque plateforme dans le répertoire root de notre projet :

# 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

Le ios et android les dossiers sont maintenant présents dans votre projet React.js.

Pour accéder au projet Android ultérieurement, installez Android Studio. Pour iOS, vous avez besoin d'un Mac et devriez installer Xcode.

Ensuite, mettez à jour le répertoire web sur votre capacitor.config.json dans le fichier comme indiqué ci-dessous :

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

Exécutez la commande de construction et synchronisez votre projet avec Capacitor :

npm run build
npx cap sync

La npm run build commande construira votre projet React.js, tandis que npx cap sync alignera le web code dans les endroits précis des plateformes natives afin qu'ils puissent être exécutés dans une application.

Maintenant, avec un peu de chance et sans erreurs, votre application React.js devrait être prête à être lancée sur un appareil !

Construire et Déployer vos Applications Natives

Le développement d'applications iOS nécessite Xcodeet les applications Android nécessitent Android Studio. Si vous prévoyez de distribuer votre application sur l'App Store, vous devez vous inscrire au programme Apple Developer pour iOS et au Google Play Console pour Android.

Le Capacitor CLI simplifie le processus d'ouverture des projets natives :

npx cap open ios
npx cap open android

Une fois que vos projets natives sont configurés, déployer votre application sur un appareil connecté est un processus simple.

Pour Android Studio, attendez que tout soit chargé puis déployez votre application sur un appareil connecté.

Pour Xcode, établissez votre compte de signature pour déployer votre application sur un appareil réel au lieu du simulateur. Une fois cela fait, cliquez simplement sur 'Démarrer' pour exécuter l'application sur votre appareil connecté, que vous pouvez choisir en haut.

Si tout s'est bien passé, vous aurez converti votre application web React.js en application mobile native !

Capacitor Live Reload

Les frameworks de développement modernes disposent généralement de la mise à jour en temps réel, et heureusement, vous pouvez avoir la même chose avec Capacitor mais sur votre appareil mobile!

Vous pouvez rendre votre application hébergée localement accessible avec la mise à jour en temps réel sur votre réseau en faisant en sorte que l'application Capacitor charge le contenu à partir d'une URL spécifique.

Premièrement, déterminez votre adresse IP locale. Sur un Mac, vous pouvez le faire en exécutant ipconfig getifaddr en0 sur votre terminal. Sur Windows, exécutez ipconfig et recherchez l'adresse IPv4.

Après cela, instruisez Capacitor pour charger l'application directement depuis le serveur en ajoutant un autre paramètre à votre capacitor.config.ts fichier:

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;

Assurez-vous d'utiliser l'adresse IP et le port exacts. Exécutez npx cap copy pour appliquer ces modifications à notre projet natif.

Une fois que vous avez déployé votre application une fois de plus à l'aide d'Android Studio ou Xcode, toute modification de votre application React sera automatiquement rechargée et affichée dans votre application !

Notez cependant que si de nouveaux plugins sont installés, comme la caméra, cela nécessite une reconstruction de votre projet natif. C'est parce que les fichiers natifs auront changé et ne peuvent pas être mis à jour en temps réel.

Utilisation des plugins Capacitor

Étudions rapidement comment utiliser un plugin Capacitor. Installons un simple, le plugin de partagequi déclenche le dialogue de partage natif :

npm i @capacitor/share

Pour l'utiliser, importez le package et appelez la fonction respective de notre application. Pensez à la share() Après l'installation d'un nouveau plugin, n'oubliez pas de synchroniser votre projet React à nouveau en utilisant Ensuite, vous pouvez rendre votre application plus native sur iOS et Android avec la navigation et les transitions __CAPGO_KEEP_0__ et résolvez les problèmes de mise en page iOS courants qui entraînent un débordement horizontal ou des zones de sécurité coupées.:

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;

UI native avec la navigation et les transitions __CAPGO_KEEP_0__ Native npx cap sync.

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

Native-feeling UI with Capgo Native Navigation and Transitions

Pour un sentiment mobile natif dans une application React + __CAPGO_KEEP_0__, utilisez les plugins __CAPGO_KEEP_1__ au lieu des kits UI web uniquement comme Konsta UI : App.js Next, you can make the app feel more native on iOS and Android with __CAPGO_KEEP_0__ navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas. Native-feeling UI with __CAPGO_KEEP_0__ Native Navigation and Transitions.

I’ve worked for years with Ionic to build cross-platform applications, but integrating it with React is hacky and rarely worth it when you already have Tailwind CSS For a native mobile feel in a React + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

• @capgo/capacitor-navigation-native — barre de navigation native, barre de Liquid Glass sur iOS, et un style de barre de navigation flou sur Android. Votre routeur React conserve l'état des routes ; le plugin possède la barre de navigation native.
• @capgo/capacitor-transitions — transitions de page à la manière d'Ionic et un retour arrière par balayage sur l'écran iOS, sans adopter l'interface d'Ionic.

Installez les deux :

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

Configurez la navigation native avec le mode d'insertion CSS pour que le contenu web respecte les barres natives :

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

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

Affichez une barre de Liquid Glass (iOS utilise la mise en page système ; Android utilise un arrière-plan flou de la vue Web) :

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

Ajoutez des transitions de page natives dans votre coquille d'application :

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

Enveloppez les pages routées dans cap-router-outlet, cap-pageet cap-contentet appelez setDirection('forward') ou setDirection('back') avant de naviguer. N'ajoutez pas de titres ou de pieds de page web lorsqu'une navigation native contrôle ces surfaces.

Voir les guides complets : Utilisation de @capgo/capacitor-navigation-native et Utilisation de @capgo/capacitor-transitions.

Aires de sécurité avec Tailwind

Pour les zones de sécurité de l'appareil dans Tailwind CSS, utilisez @capgo/tailwind-capacitor paru le tailwind-capacitor sur npm. Il fournit safe-areas des outils et d'autres plugins de Tailwind compatibles avec Capacitor :

bun add -D tailwind-capacitor

En src/index.css:

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

Utilisez des outils comme pt-safe, pb-safe, et px-safe au lieu de les répandre env(safe-area-inset-*) manuellement. Le projet est actuellement développé — si quelque chose manque pour votre configuration React, ouvre une PR sur GitHub.

Résoudre les problèmes de mise en page iOS (Vueport, Zone de sécurité, et Débordement horizontal)

Si le contenu semble coupé, décalé ou scrollable horizontalement sur iOS, ajouter plus de overflow-x: hidden ou ajuster seul le tag de vueport ne suffit généralement pas. Travaille à travers ces vérifications dans l'ordre.

Assurez-vous que le tag meta de vueport est appliqué correctement

Ajoutez le tag meta de vueport dans index.html à l'intérieur de <head>:

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

Gère la zone de sécurité iOS à partir d'un seul wrapper racine

Créez une coque d'application unique et appliquez un écartement de zone de sécurité là — et non dans plusieurs composants imbriqués :

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

Enveloppez tout le contenu de la page à l'intérieur .app-shellDupliquer l'écartement de zone de sécurité dans les en-têtes, les modaux et les enveloppes de disposition rend souvent l'interface utilisateur coupée ou trop grande.

Avec @capgo/tailwind-capacitor, vous pouvez exprimer le même écartement avec des utilitaires comme pt-safe pb-safe px-safe sur cette coque unique.

Fixez Capacitor iOS contentInset à never context : Page/zone : Page de produits de mise à jour en direct. Rôle : Étiquette de l'interface utilisateur courte ou élément de navigation. Clé de message `live_update_dynamic_label_to` (Étiquette de mise à jour dynamique vers).

premier capacitor.config.tsDans , contentInsetMode: 'css') possédez la zone de sécurité :

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

Mélanger les Capacitor automatiques d'indentation de contenu avec CSS env(safe-area-inset-*) l'ajout de padding est une cause courante de double espace.

Trouvez l'élément débordant réel

Le coupable habituel est un élément utilisant 100vw, Tailwind w-screen, une largeur de pixels fixe, ou une large min-width.

Dans l'inspecteur Web Safari, exécutez :

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

Avec Tailwind, remplacez w-screen par w-full lorsque possible. De nombreux problèmes de débordement horizontal proviennent de 100vw / w-screen, d'une duplication de padding de zone de sécurité, ou d'un conteneur à largeur fixe — et non de la balise meta de viewport elle-même.

Conclusion

Capacitor offre une manière fluide de créer des applications natives en s'appuyant sur un projet web existant, offrant un moyen simple de partager code et d'avoir une interface utilisateur cohérente.

Merci aux technologies comme Capacitor, la création d'applications mobiles à partir d'applications web React.js a jamais été aussi facile. Portez vos compétences en développement web à un niveau supérieur en créant des applications mobiles natives impressionnantes. Bon codage !

Pour en savoir plus sur la façon dont vous pouvez accélérer votre processus de développement d'applications s'inscrire à un compte gratuit aujourd'hui.

Continuez à partir de La création d'applications mobiles avec React.js pur et Capacitor

Si vous utilisez La création d'applications mobiles avec React.js pur et Capacitor pour planifier le comportement des médias et de l'interface native, connectez-l’avec Utiliser @capgo/capacitor-live-activités pour la capacité native dans Utiliser @capgo/capacitor-live-activités, capgo/capacitor-activités en direct pour les détails d'implémentation dans capgo/capacitor-activités en direct, En utilisant capgo/capacitor-joueur de vidéo pour la capacité native dans En utilisant capgo/capacitor-joueur de vidéo, capgo/capacitor-joueur de vidéo pour les détails d'implémentation dans capgo/capacitor-joueur de vidéo, et En utilisant capgo/capacitor-navigation native pour la capacité native dans En utilisant capgo/capacitor-navigation native.