react native template - react native template Code Source Download

react native template

Autre code source

System-design

Télécharger

Réagir le modèle natif

Ce projet est un modèle natif React conçu pour accélérer le développement en fournissant des fonctionnalités essentielles telles que la gestion de l'État, l'internationalisation, la récupération des données, la navigation et les composants réutilisables.

Captures d'écran

Créé à l'aide des composants par défaut fournis dans le projet.

Écran de bienvenue

Écran de connexion

Écran d'enregistrement

Écran de profil

écran de profil

Caractéristiques

? Internationalisation (I18N)
- Prise en charge multi-langues utilisant react-i18next pour la localisation transparente.
? ️ Gestion de l'État avec redux
- Gestion centralisée de l'État pour un accès et des mises à jour efficaces sur l'État mondial.
? Données récupérant avec React Query
- Données optimisées récupérant, cache et synchronisation.
? Navigation
- Navigation lisse et intuitive à l'aide de react-navigation avec des composants de base comme VStack et HStack .
Architecture basée sur les composants
- Conception modulaire avec des composants d'interface utilisateur réutilisables et un style cohérent.
? Services publics communs
- Fonctions d'assistance et utilitaires pour le développement rationalisé.
? Gestion Axios
- Demandes d'API configurables à l'aide d'Axios avec gestion des erreurs et gestion des réponses intégrées.
Gestion de Websocket
- Support de communication en temps réel à l'aide de WebSockets.
? Gestion des cookies
- Gestion simplifiée des cookies pour l'authentification et les séances utilisateur.
Authentification
- Authentification et enregistrement des utilisateurs avec gestion de jetons sécurisée.

Composants

Le projet comprend un ensemble de composants réutilisables pour la construction d'interfaces utilisateur:

Composants de la bouton
- button.tsx : composant de bouton standard avec style personnalisable.
Composants de typographie
- h1.tsx , h2.tsx : Composants de cap pour une typographie cohérente.
- text.tsx : composant de texte personnalisable pour afficher le contenu.
Composants d'entrée
- input.tsx : composant de champ de saisie de base.
- input-with-icon.tsx : champ de saisie avec une icône pour une interaction utilisateur améliorée.
Composants de disposition
- vstack.tsx : disposition de pile verticale pour organiser des éléments verticalement.
- hstack.tsx : disposition de pile horizontale pour organiser des éléments horizontalement.
- spacer.tsx : Composant de l'espaceur pour ajouter un espace flexible entre les éléments.
Composants de navigation
- navbar.tsx : barre de navigation personnalisable pour l'en-tête de l'application.
Composants de l'image
- image.tsx : composant d'image pour afficher des images avec la prise en charge de la mise en cache.
Composants utilitaires
- separator.tsx : composant de diviseur pour séparer le contenu.
- separator-with-text.tsx : divider avec texte pour une interface utilisateur améliorée.
- switch.tsx : Toggle Switch Component pour les entrées booléennes.
Fichier d'index
- index.ts : fichier d'exportation central pour les composants.

Commencer

Condition préalable

Assurez-vous que vous avez installé les suivants:

Node.js (v14 ou supérieur)
Fil
Android Studio / Xcode pour le développement Android / iOS

Installation

Clone le référentiel:

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

Installez les dépendances:
```
yarn install
```
Configurer les variables d'environnement:
Mettez à jour le fichier .env dans le répertoire racine avec vos paramètres de configuration:
```
API_URL= ' https://your-api-url.com '
SOCKET_URL= ' https://your-socket-url.com '
```

Exécution de l'application

Démarrez le métro bundler:
```
yarn start
```
Exécutez l'application sur Android:
```
yarn android
```
Exécutez l'application sur iOS:
```
yarn ios
```
Accéder à l'application:
L'application sera disponible sur votre émulateur ou votre appareil.