Esta tutoría te guiará a través de la creación de una aplicación móvil utilizando React y Capacitor. Al final, sabrás cómo transformar una aplicación web de React.js en una aplicación móvil nativa con Capacitor, y agregar un sentimiento nativo con Capgo de navegación y transiciones nativas.
Capacitor permite la fácil transformación de tu aplicación web de React.js en una aplicación móvil nativa, sin necesidad de alteraciones sustanciales o aprendizaje de nuevas estrategias como React Native.
El proceso implica unos pocos pasos simples, y antes de que lo sepas, tu aplicación de React.js será una aplicación móvil funcional. Así que quédate con nosotros mientras te guiamos en este viaje.
Capacitor Resumen
CapacitorJS es un cambio de juego. Puede integrarse de manera fluida con cualquier proyecto web y envolver tu aplicación en una vista web nativa mientras genera el proyecto de Xcode y Android Studio nativo. Además, a través de sus plugins, puedes acceder a características de dispositivo nativo como la cámara a través de un puente de JS.
Capacitor ofrece una forma sencilla de crear una aplicación móvil nativa sin problemas ni curva de aprendizaje pronunciada. Su simple API y funcionalidad simplificada lo hacen fácil de incorporar en tu proyecto.
Configuración de tu aplicación de React.js
Vamos a utilizar el método más simple para iniciar una aplicación de React. Utilizaremos el administrador de paquetes npm para crear una nueva aplicación de React:
npx create-react-app my-appPara transformar nuestro proyecto en una aplicación móvil nativa, se requiere una exportación de nuestra aplicación.
Volveremos a esto en un momento. Primero, comprendamos cómo integrar Capacitor en nuestra aplicación de React.
Integrando Capacitor en tu aplicación de React.js
Los pasos de configuración inicial pueden ser un poco detallados, pero después de eso, actualizar tu wrapper de aplicación nativa se vuelve tan simple como ejecutar un sync comando.
Primero, instalaremos el Capacitor CLI como una dependencia de desarrollo y lo configuraremos dentro de nuestro proyecto. Durante la configuración, acepte los valores predeterminados para el nombre y el ID de paquete pulsando “enter.”
Siguiente, instalaremos el paquete principal y los paquetes relevantes para las plataformas iOS y Android.
Finalmente, agregaremos las plataformas, y Capacitor creará carpetas para cada plataforma en la raíz de nuestro proyecto:
# 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 androidLa carpeta de context":"Page/area: Capgo marketing website. Role: Short UI label or navegation item. Seen in: page trust.astro. Message key `and` (And)." carpeta
de Android ahora está presente en tu proyecto de React.js. Para acceder al proyecto de Android más adelante, instala Android Studio. Para iOS, necesitas un Mac y debes instalar Xcode.
Next, actualiza el webDir en tu archivo capacitor.config.json como se muestra a continuación:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "build",
"bundledWebRuntime": false
}Ejecuta el comando de compilación y sincroniza tu proyecto con Capacitor:
npm run build
npx cap syncLa npm run build comando compilará tu proyecto de React.js, mientras que npx cap sync se alineará el web code en los lugares precisos de las plataformas nativas para que puedan ejecutarse en una aplicación.
Now, con un poco de suerte y sin errores, tu aplicación de React.js debería estar lista para su lanzamiento en un dispositivo!
Crear y Desplegar Aplicaciones Nativas
Desarrollar aplicaciones iOS requiere Xcode, y las aplicaciones Android necesitan Android Studio. Si planeas distribuir tu aplicación en la tienda de aplicaciones, debes inscribirte en el Programa de Desarrolladores de Apple para iOS y en el Console de Google Play para Android.
El Capacitor CLI simplifica el proceso de abrir ambos proyectos nativos:
npx cap open ios
npx cap open androidUna vez que estén configurados los proyectos nativos, desplegar tu aplicación en un dispositivo conectado es un proceso sencillo.
Para Android Studio, espera a que todo se cargue y luego despliega tu aplicación en un dispositivo conectado.
Para Xcode, establece tu cuenta de firma para desplegar tu aplicación en un dispositivo real en lugar del simulador. Después de hacer eso, simplemente presiona play para ejecutar la aplicación en tu dispositivo conectado, que puedes elegir en la parte superior.
Si todo ha ido bien, habrás convertido tu aplicación web de React.js en una aplicación móvil nativa!
Capacitor Live Reload
Los frameworks de desarrollo modernos suelen venir con recarga caliente, y afortunadamente, puedes tener lo mismo con Capacitor pero en tu dispositivo móvil!
Puedes hacer que tu aplicación alojada localmente esté accesible con recarga en vivo en tu red al tener la aplicación Capacitor cargar el contenido desde una URL específica.
Primero, determina tu dirección IP local. En un Mac, puedes hacerlo ejecutando ipconfig getifaddr en0 en la terminal. En Windows, ejecuta ipconfig y busca la dirección IPv4.
Después de esto, instruye a Capacitor para que cargue la aplicación directamente desde el servidor agregando otro parámetro a tu capacitor.config.ts archivo:
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;Asegúrate de utilizar la IP y el puerto precisos. Ejecuta npx cap copy para aplicar estos cambios a nuestro proyecto nativo.
Una vez que despliegues tu aplicación una vez más a través de Android Studio o Xcode, cualquier cambio en tu aplicación de React se recargarán automáticamente y se mostrarán en tu aplicación.
Ten en cuenta que si se instalan nuevos plugins, como la cámara, es necesario realizar una reconstrucción de tu proyecto nativo. Esto se debe a que los archivos nativos habrán cambiado y no pueden ser actualizados en tiempo real.
Usando Plugins Capacitor
Vamos a echar un vistazo rápido a cómo utilizar un plugin Capacitor. Vamos a instalar uno simple, el plugin de compartir, que despliega el diálogo de compartir nativo:
npm i @capacitor/sharePara utilizarlo, importa el paquete y llama a la función correspondiente desde nuestra aplicación. Considera el share() archivo App.js Después de instalar un nuevo plugin, recuerda sincronizar de nuevo tu proyecto de React utilizando :
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;Una vez hecho esto, puedes hacer que la aplicación se sienta más nativa en iOS y Android con la navegación y las transiciones __CAPGO_KEEP_0__, y solucionar problemas de diseño comunes de iOS que causan desbordamiento horizontal o áreas de seguridad recortadas. npx cap sync.
Interfaz de usuario que se siente nativa con Navegación y Transiciones Capgo Nativas
Native-feeling UI with Capgo Native Navigation and Transitions
Capacitor Ionic para construir aplicaciones de múltiples plataformas, pero integrarlo con React es engorroso y raramente vale la pena cuando ya tienes Tailwind CSS.
Para un sentir móvil nativo en una aplicación React + Capacitor, utilice en su lugar plugins Capgo en lugar de kits de interfaz de usuario web como Konsta UI:
- @capgo/capacitor-native-navigation — barra de navegación nativa, Liquid Glass barra de pestañas en iOS, y un estilo de barra de pestañas difuminado en Android. Su router de React mantiene el estado de ruta; el plugin es dueño de la barra de chrome nativa.
- @capgo/capacitor-transitions — transiciones de página estilo Ionic y retroceso de arrastre en la capa WebView en iOS, sin adoptar la interfaz de usuario de Ionic.
Instale ambos:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncConfigure la navegación nativa con el modo de inserción de CSS para que el contenido web respete las barras nativas:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Renderice una barra de pestañas de vidrio líquido (iOS utiliza la renderización propiedad del sistema; Android utiliza un fondo difuminado de la capa 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}`);
});Agregue transiciones de página nativas en la caja de su aplicación:
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 páginas con rutas en cap-router-outlet, cap-page, y cap-content, y llamar setDirection('forward') o setDirection('back') antes de navegar. No duplique encabezados o pie de página web cuando la navegación nativa se encarga de esas superficies.
Ver las guías completas: Usando @capgo/capacitor-navegación-nativa y Usando @capgo/capacitor-transiciones.
Áreas seguras con Tailwind
Para áreas seguras de dispositivos en Tailwind CSS, utilice @capgo/tailwind-capacitor (publicado como) tailwind-capacitor en npm). Ofrece safe-areas utilidades y otros plugins de Tailwind compatibles con Capacitor:
bun add -D tailwind-capacitorIn src/index.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Utiliza utilidades como pt-safe, pb-safe, y px-safe en lugar de agregarlas env(safe-area-inset-*) manualmente. El proyecto está activamente desarrollado — si algo falta para tu configuración de React, abre una solicitud de extracción en GitHub.
Corrigiendo problemas de diseño de iOS (Viewport, Área Segura y Desbordamiento Horizontal)
Si el contenido parece recortado, desplazado o desplazable horizontalmente en iOS, agregar más overflow-x: hidden o ajustar la etiqueta de viewport sola no suele solucionar el problema. Trabaja a través de estas comprobaciones en orden.
Asegúrese de que la etiqueta meta de viewport se aplique correctamente
Agregue la etiqueta meta de viewport en index.html dentro de <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Administre el área segura de iOS desde un solo wrapper raíz
Crear un solo concha de aplicación y aplique allí el relleno de área segura — no en múltiples componentes anidados:
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);
}Envuelva todo el contenido de la página dentro de .app-shellEl relleno de área segura duplicado en encabezados, modales y wrappers de diseño a menudo hace que la interfaz de usuario se vea recortada o demasiado grande.
Con @capgo/tailwind-capacitorpuede expresar el mismo relleno con utilidades como pt-safe pb-safe px-safe en esa sola concha.
Establezca Capacitor iOS contentInset Hasta never primero
En capacitor.config.ts, prefiera el diseño nativo deshabilitado y deja que CSS (o la navegación nativa) contentInsetMode: 'css') se encargue del área segura:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'build',
ios: {
contentInset: 'never',
},
};Mezclar el diseño de contenido automático de Capacitor con CSS env(safe-area-inset-*) es una causa común de espaciado doble.
Encuentra el elemento que está desbordando realmente
El culpable habitual es un elemento que utiliza 100vw, Tailwind w-screen, un ancho de píxeles fijo, o un tamaño min-width.
Inicia el depurador de Safari Web Inspector, ejecuta:
[...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,
}));Con Tailwind, reemplaza w-screen con w-full cuando sea posible. Muchos problemas de rebosamiento horizontal provienen de 100vw / w-screenrepetido relleno de zona segura, o un contenedor de ancho fijo — no del etiqueta meta de viewport en sí.
Conclusión
Capacitor ofrece un medio fluido para crear aplicaciones nativas basadas en un proyecto web existente, proporcionando una forma sencilla de compartir code y tener una interfaz de usuario consistente.
Gracias a tecnologías como Capacitor, nunca ha sido más fácil crear aplicaciones móviles a partir de aplicaciones web de React.js. Lleva tus habilidades de desarrollo web al siguiente nivel creando aplicaciones móviles nativas impresionantes. ¡Disfruta codificando!
Para obtener más información sobre cómo acelerar tu proceso de desarrollo de aplicaciones regístrate para una cuenta gratuita hoy.
Sigue adelante desde Crear aplicaciones móviles con React.js puro y Capacitor
Si estás utilizando Crear aplicaciones móviles con React.js y Capacitor para planificar el comportamiento de medios y interfaz nativa, conectarlo con Usando @capgo/capacitor-actividades-en-vivo para la capacidad nativa en Usando @capgo/capacitor-actividades-en-vivo, @capgo/capacitor-actividades-en-vivo para el detalle de implementación en @capgo/capacitor-actividades-en-vivo, Usando @capgo/capacitor-reproductor-de-videos para la capacidad nativa en Usando @capgo/capacitor-reproductor-de-videos, @capgo/capacitor-reproductor-de-videos para el detalle de implementación en @capgo/capacitor-reproductor-de-videos, y Usando @capgo/capacitor-navegación-nativa para la capacidad nativa en Usando @capgo/capacitor-navegación-nativa.
