# Système de conception React Native Elements ## Aperçu de l’interface du système de conception React Native Elements Modifiez la tâche, la durée et la pause, puis examinez la validation, l’apparence et la réinitialisation. ## Référence de conception du système de conception React Native Elements Valeurs par défaut des sources de RNEUI définies par version, API publiques des composants et choix propres à l’application clairement indiqués. ### Couleurs du thème clair | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | lightColors.primary | #2089dc | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | lightColors.secondary | #ad1457 | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | lightColors.background | #ffffff | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | lightColors.black | #242424 | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | lightColors.white | #ffffff | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | lightColors.grey1 | #43484d | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | lightColors.grey2 | #5e6977 | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | lightColors.grey5 | #e1e8ee | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | lightColors.success | #52c41a | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | lightColors.error | #ff190c | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | lightColors.warning | #faad14 | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | ### Couleurs du thème sombre | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | darkColors.primary | #439ce0 | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | darkColors.secondary | #aa49eb | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | darkColors.background | #080808 | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | darkColors.black | #f2f2f2 | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | darkColors.white | #080808 | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | darkColors.grey1 | #bdc6cf | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | darkColors.grey2 | #86939e | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | darkColors.grey5 | #393e42 | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | darkColors.success | #439946 | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | darkColors.error | #bf2c24 | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | | darkColors.warning | #cfbe27 | Valeur réelle du thème RNEUI. Les rôles tels que noir et blanc s’inversent visuellement en mode sombre ; utilisez le thème actif plutôt que des couleurs littérales codées en dur. | ### Espacement par défaut et choix explicites propres à l’application | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | spacing.xs | 2 | Entrée d’espacement par défaut publiée ; ces noms composent un objet de thème, et non des jetons de variable CSS. | | spacing.sm | 4 | Entrée d’espacement par défaut publiée ; ces noms composent un objet de thème, et non des jetons de variable CSS. | | spacing.md | 8 | Entrée d’espacement par défaut publiée ; ces noms composent un objet de thème, et non des jetons de variable CSS. | | spacing.lg | 12 | Entrée d’espacement par défaut publiée ; ces noms composent un objet de thème, et non des jetons de variable CSS. | | spacing.xl | 24 | Entrée d’espacement par défaut publiée ; ces noms composent un objet de thème, et non des jetons de variable CSS. | | Sample heading | 32px / weight 700 | Choix original de l’exemple, explicitement configuré dans la source fournie plutôt que présenté comme un type global ou un jeton de rayon officiel. | | Sample body | 15px / 23px line height | Choix original de l’exemple, explicitement configuré dans la source fournie plutôt que présenté comme un type global ou un jeton de rayon officiel. | | Sample cards | 24px padding / 8px radius | Choix original de l’exemple, explicitement configuré dans la source fournie plutôt que présenté comme un type global ou un jeton de rayon officiel. | | Button component default | radius: 6 | Choix original de l’exemple, explicitement configuré dans la source fournie plutôt que présenté comme un type global ou un jeton de rayon officiel. | ### Contrats des composants et du fournisseur | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | createTheme | mode, components, lightColors, darkColors | ThemeProvider reçoit l’objet construit ; les valeurs par défaut restent disponibles lorsque seuls les composants sont modifiés. | | useTheme | theme, updateTheme | L’action d’apparence change le mode sans réinitialiser l’état de l’application. | | Input | value, onChangeText, errorMessage, ref | L’erreur signalant une tâche vide est visible et le focus revient dans le champ de saisie correspondant. | | ButtonGroup | buttons, selectedIndex, onPress | L’index contrôlé sélectionne 15, 25 ou 45 minutes ; il ne représente pas la durée elle-même. | | Switch | value, onValueChange | La valeur booléenne contrôlée modifie la description de la pause. | | Card | Card.Title, Card.Divider | Les surfaces structurées héritent du thème sélectionné. | | Button | title, onPress, type | L’action d’enregistrement valide l’état local ; la réinitialisation restaure les valeurs par défaut. | | SafeAreaProvider | Outer application provider | Contexte d’intégration requis ; un fonctionnement réussi sur le Web ne garantit pas la prise en charge des zones de sécurité sur les appareils natifs. | ## Guide complet du système de conception React Native Elements Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Périmètre d’exécution et du Web du système de conception React Native Elements ### Exécuter les vrais composants thémés > Cet exemple utilise @rneui/themed et @rneui/base en version 5.0.0, React 19.2.0 et React Native Web 0.21.3. La compilation pour navigateur associe react-native à react-native-web et sélectionne les modules .web.js avant les modules JavaScript génériques. Il s’agit des véritables composants de la bibliothèque affichés sur le Web, et non de blocs HTML imitant une capture d’écran mobile. Le fichier de compilation fourni inclut ce choix de résolution afin que le code autonome reproduise l’aperçu. ### Distinguer les preuves Web et natives Cette interface est un éditeur de programme de concentration, et non un minuteur ou un gestionnaire de notifications en fonctionnement. SafeAreaProvider enveloppe l’application comme l’exige l’intégration, mais ce test dans le navigateur ne valide ni les marges de sécurité sous iOS ou Android, ni le comportement du clavier natif, ni les autorisations de notification sur l’appareil. Un projet natif nécessite sa propre compilation pour la plateforme et des tests sur appareil, en plus de ces exemples de composants partagés. - Le rendu Web utilise React Native Web. - Le programme est conservé uniquement dans l’état local de React. - Aucun minuteur, aucune notification système ni aucun enregistrement côté serveur ne sont déclenchés. ## Objets de thème et couleurs du système de conception React Native Elements ### Utiliser les rôles du thème actif createTheme fusionne les couleurs intégrées des thèmes clair et sombre avec les éventuelles substitutions explicites. L’exemple ne modifie que les valeurs par défaut des composants et le mode. useTheme fournit les couleurs résolues aux éléments View et Text environnants, afin que le grand titre, les descriptions et les panneaux suivent l’apparence sélectionnée. En mode sombre, black correspond au rôle de premier plan clair et white à celui d’une surface sombre ; traiter ces noms comme des valeurs de couleur littérales briserait le thème. ### Ne pas inventer une échelle typographique universelle RNEUI fournit des valeurs par défaut pour les composants et des mécanismes de personnalisation, plutôt que le même modèle de jetons qu’un système de conception CSS. La référence distingue donc les entrées réelles de defaultSpacing des choix de l’exemple : un titre de 32px, un corps de texte de 15px et un rayon de carte de 8px. Ces dimensions sont des paramètres de composition originaux visibles dans le code. Il ne faut pas les présenter comme des règles de marque obligatoires de React Native Elements. ## Validation des entrées et gestion du focus du système de conception React Native Elements ### Contrôler explicitement le texte de la tâche L’entrée reçoit une valeur et un rappel onChangeText. L’action de conservation supprime les espaces superflus de la valeur avant de vérifier si elle est vide. Si elle l’est, errorMessage affiche une demande précise et la référence du composant redonne le focus au champ. Modifier le texte efface l’erreur précédente et invalide la confirmation locale, afin qu’un ancien message de sauvegarde ne décrive pas un plan qui a été modifié. ### Associer le libellé à l’erreur Le libellé visible « Tâche de concentration » et accessibilityLabel désignent le même contrôle. Le texte indicatif suggère un contenu, mais ne remplace pas le libellé. La validation est déclenchée par l’action explicite de conservation, et non à chaque frappe. En cas d’erreur, l’utilisateur conserve son brouillon. Aucune animation de sauvegarde asynchrone ne laisse croire à une requête serveur qui n’a jamais lieu. ## Système de design React Native Elements — sélection contrôlée ### Distinguer l’index sélectionné de la durée ButtonGroup reçoit trois libellés, selectedIndex et onPress. L’index renvoyé sélectionne une valeur dans la liste d’origine [15, 25, 45] minutes ; utiliser directement cet index comme nombre de minutes constituerait un bogue de l’application. Le grand nombre récapitulatif de l’aperçu est dérivé du même index sélectionné, afin que le contrôle segmenté et le plan présenté clairement ne puissent pas se contredire. ### Faire du choix de pause une véritable valeur booléenne Switch reçoit value et onValueChange, avec un nom accessible qui décrit le réglage. Le récapitulatif indique soit une courte pause, soit l’absence de rappel de pause. Il s’agit uniquement d’une préférence du plan : l’interface ne crée aucun rappel système et ne programme aucune notification. Le texte de confirmation de conservation précise également cette portée locale. ## Système de design React Native Elements — préservation et réinitialisation de l’état ### Dissocier le thème du plan La modification de l’apparence appelle updateTheme avec le mode opposé. La tâche, la durée sélectionnée, le réglage de pause et la confirmation locale restent dans l’état de l’application, indépendamment de cette mise à jour. Les composants natifs adoptent le nouveau thème sans reconstruire le plan. La vérification dans le navigateur modifie l’apparence après la saisie d’une tâche personnalisée, afin de confirmer que le mode visuel n’est pas lié par erreur à la réinitialisation des données. ### Prévoir une seule action de récupération explicite Réinitialiser le plan rétablit la tâche d’exemple, la durée de 25 minutes et la pause activée, efface l’erreur de validation et supprime la confirmation. L’apparence sélectionnée est conservée. La réinitialisation du contenu est ainsi distincte de la préférence de thème et n’entraîne pas de rechargement complet inattendu de la page. L’exemple ne comporte aucune couche de persistance : rouvrir le document rétablit donc l’exemple initial. ## Système de design React Native Elements — composition adaptative ### Adapter la disposition des deux cartes Le contenu utilise useWindowDimensions pour afficher les cartes en ligne au-delà de 700px et en colonne sur les écrans plus étroits. La marge extérieure de chaque Card est nulle : l’espacement de 24px de la composition assure leur alignement. En dessous de 500px de largeur, le remplissage extérieur passe à 16px. Les deux cartes présentent un plan modifiable et un récapitulatif qui en découle, plutôt que des éléments décoratifs répétés. ### Examiner les styles par défaut des composants dans les deux thèmes Les composants RNEUI peuvent appliquer leurs propres styles par défaut en plus des couleurs globales. Par exemple, dans cet exemple, les segments non sélectionnés de ButtonGroup conservent leur traitement de surface natif. Si un produit nécessite un contraste ou une densité visuelle différents, il est possible de définir explicitement buttonStyle et selectedButtonStyle ; cette décision doit toutefois être vérifiée, et non attribuée à une application automatique du thème global. ## Système de design React Native Elements — configuration complète du navigateur ### Inclure la résolution web et les chargeurs de ressources Le fichier build.mjs fourni utilise esbuild avec l’analyse JSX pour les dépendances JavaScript, l’alias react-native-web, la priorité de .web.js et des chargeurs de données pour les ressources PNG et TTF intégrées aux packages. Le point d’entrée du package comprend des exports qui référencent ces ressources même lorsque la composition visible ne comporte aucune icône. La compilation ne peut donc pas être remplacée par un simple import dans le navigateur du code source non traité. ### Tester l’ensemble des interactions locales Enregistrez la source fournie sous le nom rne.jsx et HTML sous le nom index.html, installez les versions épinglées des packages, lancez la compilation et servez le répertoire. Testez une tâche vide, une tâche personnalisée, une autre durée, le commutateur de pause, l’apparence et la réinitialisation. Cela vérifie la composition fournie ; cela ne valide pas automatiquement chaque composant RNEUI exporté ni chaque plateforme native. 1. Placez les trois fichiers fournis dans le même répertoire. 2. Installez les dépendances épinglées et exécutez node build.mjs. 3. Servez le bundle généré avec index.html. 4. Testez les états vide, modifié, avec thème et réinitialisé. ## Système de design React Native Elements — exemples de composants ### rne.jsx Fournisseur complet, composants natifs et état de l’application. ``` import React,{useState,useRef} from 'react'; import {createRoot} from 'react-dom/client'; import {View,Text,useWindowDimensions} from 'react-native'; import {ThemeProvider,createTheme,Button,ButtonGroup,Input,Switch,Card,Divider,useTheme} from '@rneui/themed'; import {SafeAreaProvider} from 'react-native-safe-area-context'; const theme=createTheme({mode:'light',components:{Button:{radius:6},Input:{containerStyle:{paddingHorizontal:0}}}}); function App(){const {theme,updateTheme}=useTheme();const {width}=useWindowDimensions();const [title,setTitle]=useState('Read a chapter'),[duration,setDuration]=useState(1),[breaks,setBreaks]=useState(true),[error,setError]=useState(false),[saved,setSaved]=useState('');const input=useRef(null);let c=theme.colors;function changed(){setSaved('')}function save(){if(!title.trim()){setError(true);input.current?.focus();return;}setError(false);setSaved(`${title.trim()} · ${[15,25,45][duration]} minutes · ${breaks?'with a short break':'no break reminder'}. Kept in this preview only.`)}return REACT NATIVE ELEMENTS · WEB STUDYMake room for one thing