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 en 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 dispositivos nativos 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 presionando “enter”.
Seguido, 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 ios y context: Página/área: Sitio web de marketing de Capgo. Rol: Etiqueta de UI corta o elemento de navegación. Visto en: página trust.astro. Clave de mensaje `y` (Y).
carpeta android están ahora presentes 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.
Posteriormente, actualiza el webDir en tu capacitor.config.json archivo 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.
Ahora, 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 Xcodey 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 tengas configurados tus 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 de solo en el 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 tu proyecto de React nuevamente con :
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;Posteriormente, 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 en iOS que causan desbordamiento horizontal o áreas de seguridad recortadas. npx cap sync.
Interfaz de usuario que se siente nativa con la navegación y las transiciones Capgo Nativas
Native-feeling UI with Capgo Native Navigation and Transitions
plugins de Capacitor durante años Para crear aplicaciones de escritorio cruzadas, pero integrarla con React es engorroso y raramente vale la pena cuando ya tienes Para un sentir móvil nativo en una aplicación React + __CAPGO_KEEP_0__, utilice en su lugar plugins __CAPGO_KEEP_1__ en lugar de kits de interfaz de usuario solo web como Konsta UI: @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation.
For a native mobile feel in a React + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:
- @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.
- @capgo/capacitor-transitions Configure la navegación nativa con el modo de inserción de CSS para que el contenido web respete las barras nativas:
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):
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncAgregue transiciones de página nativas en su capa de concha:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Instale ambos:
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}`);
});Configure la navegación nativa con el modo de inserción de CSS para que el contenido web respete las barras nativas:
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>;
}Envuelve páginas de navegación en cap-router-outlet, cap-page, y cap-content, y llama setDirection('forward') o setDirection('back') antes de navegar. No dupliques 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, utiliza @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";Utilice 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 su configuración de React, abre una solicitud de extracción en GitHub.
Corrección de 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. Pase por estos controles en orden.
Asegúrese de que la etiqueta meta de viewport se aplique correctamente
Agregar la etiqueta meta de viewport en index.html dentro de <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Administrar el área segura de iOS desde un solo wrapper raíz
Crear una caja de aplicación única y aplicar 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);
}Envolver 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 IU parezca recortada o demasiado grande.
Con @capgo/tailwind-capacitorpuede expresar el mismo relleno con utilidades como pt-safe pb-safe px-safe en esa caja única.
Establecer Capacitor iOS contentInset Hasta never primero
En capacitor.config.ts, prefiere 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 ancho muy grande min-width.
En 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 una forma fluida de crear aplicaciones nativas basadas en un proyecto web existente, proporcionando una forma simple 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 en 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.
