Un marco integral para la ingeniería de aplicaciones móviles de alto rendimiento utilizando los ecosistemas de React Native y Expo.
Instalar y Descargar
1. ClawHub CLI
La forma más rápida de instalar una habilidad directamente desde el registro.
npx clawhub@latest install minimax-react-native-dev
2. Instalación manual
Copia la carpeta de la habilidad a una de estas ubicaciones
~/.openclaw/skills/ <project>/skills/ Prioridad: Espacio de trabajo > Local > Integrado
3. Instalación del prompt
Copia este prompt en OpenClaw para instalarlo automáticamente.
Ayúdame a instalar minimax-react-native-dev usando Clawhub. Si Clawhub no está instalado, instálalo primero (npm i -g clawhub).
¿Prefieres descargar?
Obtén los archivos originales de la habilidad en un archivo ZIP.
¿Qué es Desarrollo con React Native & Expo?
Esta guía de Openclaw Skills proporciona un enfoque centrado en la producción para el desarrollo móvil. Cubre todo el ciclo de vida de la construcción de aplicaciones multiplataforma, desde la arquitectura inicial del proyecto con Expo Router hasta el ajuste fino del rendimiento y la implementación. Al utilizar estas Openclaw Skills, los desarrolladores pueden implementar fácilmente funciones complejas como animaciones de valor compartido, obtención eficiente de datos con React Query e integración de módulos nativos.
El enfoque está en el uso de alternativas modernas y de alto rendimiento a los componentes heredados, asegurando que las aplicaciones creadas con esta habilidad permanezcan fluidas, receptivas y fáciles de mantener. Cierra la brecha entre el desarrollo básico de UI y la ingeniería móvil profesional al incorporar herramientas estándar de la industria como Reanimated 3, FlashList y EAS.
Casos de uso de Desarrollo con React Native & Expo
- Creación de aplicaciones móviles multiplataforma de alto rendimiento para iOS y Android.
- Implementación de animaciones fluidas a 60FPS e interacciones basadas en gestos.
- Arquitectura de estructuras de navegación escalables mediante enrutamiento basado en archivos.
- Optimización de listas de datos a gran escala para evitar tirones en el desplazamiento y fugas de memoria.
- Gestión de estados complejos de aplicaciones y sincronización de datos sin conexión.
Cómo funciona Desarrollo con React Native & Expo
- Inicializa el proyecto usando la plantilla TypeScript de Expo para establecer una base segura en cuanto a tipos.
- Configura el enrutamiento y los diseños basados en archivos para gestionar el flujo de la aplicación y los enlaces profundos.
- Integra componentes de UI optimizados, como FlashList para un renderizado eficiente y expo-image para un almacenamiento en caché avanzado.
- Aplica la gestión de estado global y la lógica de red utilizando herramientas como Zustand y React Query.
- Implementa capacidades nativas del dispositivo, como acceso a la cámara, háptica y biometría mediante hooks unificados.
- Ejecuta perfiles de rendimiento para identificar y resolver problemas de diseño o tamaño del paquete (bundle).
- Implementa la aplicación en la App Store y Play Store usando los flujos de trabajo de EAS Build y Submit.
Configuración de Desarrollo con React Native & Expo
Para comenzar a usar estas Openclaw Skills para tu proyecto móvil, ejecuta los siguientes comandos:
# Create a new Expo project
npx create-expo-app@latest my-app --template blank-typescript
cd my-app
# Install core navigation and UI dependencies
npx expo install expo-router react-native-safe-area-context react-native-screens
# Add performance and animation libraries
npx expo install expo-image react-native-reanimated react-native-gesture-handler
Asegúrate de que la entrada principal de tu package.json esté configurada como expo-router/entry para habilitar el enrutamiento basado en archivos.
Esquema de datos y taxonomía de Desarrollo con React Native & Expo
Esta habilidad sigue una estructura de proyecto modular para mantener una clara separación de responsabilidades dentro de Openclaw Skills.
| Carpeta | Responsabilidad |
|---|---|
app/ |
Contiene todas las rutas, diseños y lógica de navegación. |
components/ui/ |
Aloja elementos de UI atómicos y reutilizables y estilos. |
stores/ |
Gestiona el estado global usando Zustand o átomos de Jotai. |
services/ |
Maneja las definiciones de API, contenedores de fetch y webhooks. |
references/ |
Almacena la documentación para módulos específicos como animaciones y pruebas. |
Funciones avanzadas de Desarrollo con React Native & Expo
- Integración de NativeWind v4 para estilos al estilo Tailwind en dispositivos móviles.
- Manejo avanzado de gestos y animaciones impulsadas por el desplazamiento con Reanimated 3.
- Configuración de pipeline CI/CD automatizado mediante Expo Application Services (EAS).
- Flujos de trabajo de pruebas E2E usando Maestro para la validación crítica de rutas de usuario.
- Optimización R8 y análisis de bundle para minimizar el tamaño del binario en Android.
SKILL.md
Cargando
Habilidades relacionadas de Openclaw
cre-scraper
Una skill de agente de AI especializada para extraer y analizar listados de bienes raíces comerciales de Crexi y LoopNet usando Claude en Chrome.
Vmaker AI Video Editor
Una suite de edición de video impulsada por IA que automatiza el corte, el subtitulado y la mejora de metraje mediante comandos simples en lenguaje natural.
TikiCow
Una integración avanzada de AI agent para automatizar el juego, la gestión de recursos y la estrategia económica dentro del simulador de granja de navegador TikiCow.
Informe de Recomendación de Hospitales en China
Una habilidad de nivel profesional para generar informes de recomendación de hospitales en inglés y entregas de turismo médico para el mercado de la salud chino.
GIF Sticker Maker
Una habilidad impulsada por IA que convierte fotos en cuatro stickers GIF animados estilo Funko Pop con subtítulos localizados.
Desarrollo Flutter
Un marco integral para construir aplicaciones Flutter multiplataforma de alto rendimiento con patrones de gestión de estado y optimización estándar de la industria.
Presentado*
