Créer des applications mobiles avec Pure React.js et Capacitor

Cet article vous guidera dans la création d'une application mobile à l'aide de 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 et transitions natives.

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 que vous ne le sachiez, votre application React.js sera une application mobile fonctionnelle. Alors, restez avec nous tout au long de ce voyage.

Capacitor : Présentation

CapacitorJS est un jeu de changer. 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 le projet Xcode et Android Studio natif. De plus, grâce à ses plugins, vous pouvez accéder aux fonctionnalités de périphérique native comme la caméra via un pont JS.

Capacitor offre une façon simple de créer une application mobile native sans aucune difficulté ou courbe d'apprentissage raide. Sa simple API et sa fonctionnalité épurée rendent facile l'intégration dans votre projet.

Configuration de votre application React.js

Allons-y pour 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 à 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 d'initialisation initiales 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 bundle en appuyant sur « entrer ».

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 racine 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 répertoires 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.

Mettez à jour ensuite répertoire web dans votre capacitor.config.json fichier comme montré 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

Le npm run build la 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 pour la mise en ligne sur un appareil !

Construction et déploiement de vos applications natives

Le développement d'applications iOS nécessite Xcodeet les applications Android nécessitent Android StudioSi 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, la mise en ligne de 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 en avoir le même 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 dans le terminal. Sur Windows, exécutez ipconfig et cherchez l'adresse IPv4.

Après cela, instruisez Capacitor pour charger l'application directement du 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;

Soyez sûr d'utiliser l'adresse IP et le port exacts. Exécutez npx cap copy pour appliquer ces modifications à notre projet natif.

Lorsque vous déployez 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 !

Gardez à l'esprit que si de nouveaux plugins sont installés, tels que la caméra, cela nécessite une reconstruction de votre projet natif. C'est parce que les fichiers natifs ont 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. Considérez le share() App.js Après l'installation d'un nouveau plugin, n'oubliez pas de synchroniser votre projet React à nouveau en utilisant:

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;

Ensuite, vous pouvez rendre l'application plus native sur iOS et Android avec les __CAPGO_KEEP_0__ navigation et transitions, et corriger les problèmes de mise en page iOS courants qui entraînent un débordement horizontal ou des zones de sécurité coupées. npx cap sync.

Interface utilisateur ressemblant à une application native avec les Capgo Navigation et Transitions Native

Native-feeling UI with Capgo Native Navigation and Transitions

Ionic pour construire des applications cross-plateformes, mais l'intégration avec React est hacky et rarement valable lorsque vous avez déjà Tailwind CSS Pour un sentiment de mobilité native dans une application React + __CAPGO_KEEP_0__ , utilisez les __CAPGO_KEEP_1__ plugins au lieu des kits UI web uniquement comme Konsta UI :.

Pour un sentiment de mobilité native dans une application React + Capacitor , utilisez les Capgo plugins au lieu des kits UI web uniquement comme Konsta UI :

• @capgo/capacitor-navigation native — une barre de navigation native, une barre de Liquid Glass sur iOS, et une barre de style floue sur Android. Votre routeur React conserve l'état des routes ; le plugin possède la barre native.
• @capgo/capacitor-transitions — des transitions de page à la manière d'Ionic et un retour en arrière par balayage sur iOS dans la couche WebView, sans adopter l'interface utilisateur 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 fond flou de WebView) :

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-page, et cap-content, et 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 : En utilisant @capgo/capacitor-navigation-native et En utilisant @capgo/capacitor-transitions.

Aires sûres avec Tailwind

Pour les zones sûres des appareils dans Tailwind CSS, utilisez @capgo/tailwind-capacitor (publié sous tailwind-capacitor sur npm). Il fournit safe-areas des utilitaires et d'autres plugins Tailwind compatibles avec Capacitor :

bun add -D tailwind-capacitor

In 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 ajouter 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 déroulable horizontalement sur iOS, ajouter plus overflow-x: hidden ou ajuster seul le tag de vueport ne résout généralement pas le problème. Travaillez à 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 <head>:

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

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

Créez un noyau d'application unique et appliquez un padding de zone sécurisée 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-shellLe padding de zone sécurisée dupliqué dans les en-têtes, les modales 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 padding avec des utilitaires comme pt-safe pb-safe px-safe sur ce seul noyau.

Définissez Capacitor iOS contentInset sur never premier

En capacitor.config.ts, préférez l'inset natif désactivé et laissez CSS (ou la navigation native) gérer contentInsetMode: 'css'Dominer 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 de contenu d'indentation avec CSS env(safe-area-inset-*) Le recul en pixels est une cause courante de double espace.

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

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

Dans l'inspecteur Web de 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, de la duplication de la zone de sécurité, ou d'un conteneur à largeur fixe — et non de la balise meta de la zone de vue elle-même.

Conclusion

Capacitor offre une manière fluide de créer des applications natives en fonction d'un projet web existant, offrant une façon 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 Building Mobile Apps with Pure React.js et Capacitor

Si vous utilisez Building Mobile Apps with Pure React.js et Capacitor pour planifier le comportement des médias et de l'interface native, connectez-le 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.