Descargar react native template : descarga del código fuente react native template

react native template

Otro código fuente

System-design

Descargar

Plantilla nativa reaccionar

Este proyecto es una plantilla nativa React diseñada para acelerar el desarrollo al proporcionar características esenciales como la gestión estatal, la internacionalización, la obtención de datos, la navegación y los componentes reutilizables.

Capturas de pantalla

Creado usando los componentes predeterminados proporcionados en el proyecto.

Pantalla de bienvenida

Pantalla de inicio de sesión

Pantalla de registro

pantalla de registro

Pantalla de perfil

pantalla de perfil

Características

? Internacionalización (i18n)
- Soporte de varios idiomas utilizando react-i18next para una localización perfecta.
? ️ Gestión estatal con Redux
- Gestión estatal centralizada para acceso y actualizaciones de estado global eficientes.
? Datos obteniendo la consulta React
- Obtención de datos optimizados, almacenamiento en caché y sincronización.
? Navegación
- Navegación suave e intuitiva utilizando react-navigation con componentes base como VStack y HStack .
⚛️ Arquitectura basada en componentes
- Diseño modular con componentes de UI reutilizables y estilo consistente.
? Utilidades comunes
- Funciones y utilidades auxiliares para el desarrollo simplificado.
? Gestión de axios
- Solicitudes de API configurables que utilizan AXIOS con manejo de errores incorporado y administración de respuesta.
Administración de WebSocket
- Soporte de comunicación en tiempo real utilizando WebSockets.
? Gestión de cookies
- Gestión simplificada de cookies para autenticación y sesiones de usuario.
Autenticación
- Autenticación y registro del usuario con gestión de token seguro.

Componentes

El proyecto incluye un conjunto de componentes reutilizables para construir interfaces de usuario:

Componentes del botón
- button.tsx : componente de botón estándar con estilo personalizable.
Componentes de tipografía
- h1.tsx , h2.tsx : componentes de encabezado para una tipografía consistente.
- text.tsx : componente de texto personalizable para mostrar contenido.
Componentes de entrada
- input.tsx : componente básico del campo de entrada.
- input-with-icon.tsx : campo de entrada con un icono para una interacción mejorada del usuario.
Componentes de diseño
- vstack.tsx : diseño de pila vertical para organizar elementos verticalmente.
- hstack.tsx : diseño de pila horizontal para organizar elementos horizontalmente.
- spacer.tsx : componente espaciador para agregar espacio flexible entre elementos.
Componentes de navegación
- navbar.tsx : barra de navegación personalizable para el encabezado de aplicaciones.
Componentes de la imagen
- image.tsx : componente de imagen para mostrar imágenes con soporte de almacenamiento en caché.
Componentes de utilidad
- separator.tsx : componente divisor para separar el contenido.
- separator-with-text.tsx : divisor con texto para una interfaz de usuario mejorada.
- switch.tsx : alternar componente de interruptor para entradas booleanas.
Archivo índice
- index.ts : archivo de exportación central para componentes.

Empezando

Requisitos previos

Asegúrese de tener lo siguiente instalado:

Node.js (v14 o superior)
Hilo
Android Studio / Xcode para el desarrollo de Android / iOS

Instalación

Clon el repositorio:

git clone [email protected]:ToniDarodda/react-native-template.git
cd ReactNativeTemplate

Instalar dependencias:
```
yarn install
```
Configurar variables de entorno:
Actualice el archivo .env en el directorio raíz con su configuración de configuración:
```
API_URL= ' https://your-api-url.com '
SOCKET_URL= ' https://your-socket-url.com '
```

Ejecutando la aplicación

Comience el Metro Bundler:
```
yarn start
```
Ejecute la aplicación en Android:
```
yarn android
```
Ejecute la aplicación en iOS:
```
yarn ios
```
Acceda a la aplicación:
La aplicación estará disponible en su emulador o dispositivo.