Système de conception React Native Elements.

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

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

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 <View style={{backgroundColor:c.background,padding:width<500?16:32,maxWidth:1000,width:'100%',alignSelf:'center'}}><View style={{flexDirection:'row',justifyContent:'space-between',gap:24,flexWrap:'wrap',marginBottom:24}}><View style={{flexShrink:1}}><Text style={{color:c.primary,fontSize:13,fontWeight:'700'}}>REACT NATIVE ELEMENTS · WEB STUDY</Text><Text accessibilityRole="header" style={{fontSize:32,fontWeight:'700',color:c.black,marginTop:12}}>Make room for one thing</Text></View><Button title={theme.mode==='light'?'Use dark theme':'Use light theme'} type="outline" onPress={()=>updateTheme({mode:theme.mode==='light'?'dark':'light'})}/></View><Text style={{color:c.grey1,fontSize:15,lineHeight:23}}>An original focus-plan composer using RNEUI 5.0.0 through React Native Web. No timer or system notification is started.</Text><View style={{flexDirection:width>700?'row':'column',gap:24,marginTop:24}}><Card containerStyle={{flex:1,margin:0,padding:24,borderRadius:8}}><Card.Title>Shape your focus block</Card.Title><Card.Divider/><Input ref={input} label="Focus task" accessibilityLabel="Focus task" value={title} onChangeText={v=>{setTitle(v);setError(false);changed()}} errorMessage={error?'Enter a task before keeping this plan.':''} placeholder="What deserves your attention?"/><Text style={{fontSize:16,fontWeight:'700',color:c.grey1,marginBottom:8}}>Duration</Text><ButtonGroup buttons={['15 min','25 min','45 min']} selectedIndex={duration} onPress={i=>{setDuration(i);changed()}} containerStyle={{marginHorizontal:0,height:48,marginBottom:24}}/><View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center',gap:16,marginBottom:24}}><Text style={{fontSize:16,color:c.black,flexShrink:1}}>Include a short break</Text><Switch value={breaks} onValueChange={v=>{setBreaks(v);changed()}} accessibilityLabel="Include a short break"/></View><Button title="Keep this plan" onPress={save}/></Card><Card containerStyle={{flex:1,margin:0,padding:24,borderRadius:8}}><Card.Title>Your local plan</Card.Title><Card.Divider/><Text style={{fontSize:48,fontWeight:'700',color:c.primary}}>{[15,25,45][duration]}</Text><Text style={{fontSize:16,color:c.grey1,marginBottom:24}}>minutes for {title.trim()||'your next task'}</Text><Divider/><Text style={{color:c.black,fontSize:16,lineHeight:25,marginVertical:24}}>{breaks?'Finish with a pause before choosing what comes next.':'Keep the end of this block open; no break reminder is included.'}</Text><Text style={{fontSize:13,lineHeight:21,color:c.grey2}}>The duration, task and break choice are original application state. Theme colors, Input, ButtonGroup, Switch, Card and Button come from the installed library.</Text></Card></View><Text accessibilityLiveRegion="polite" style={{color:c.black,fontSize:15,lineHeight:23,marginTop:24}}>{saved}</Text><Button title="Reset the plan" type="clear" onPress={()=>{setTitle('Read a chapter');setDuration(1);setBreaks(true);setError(false);setSaved('');}} containerStyle={{alignSelf:'flex-start',marginTop:8}}/></View>}
createRoot(document.getElementById('root')).render(<SafeAreaProvider><ThemeProvider theme={theme}><App/></ThemeProvider></SafeAreaProvider>);

import {build} from 'esbuild';
await build({entryPoints:['rne.jsx'],bundle:true,minify:true,outfile:'rne.bundle.js',alias:{'react-native':'react-native-web'},resolveExtensions:['.web.js','.js','.jsx','.json'],loader:{'.js':'jsx','.ttf':'dataurl','.png':'dataurl'},define:{'process.env.NODE_ENV':'"production"'}});

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Focus plan composer</title><style>body{margin:0;background:#f4f7fa}*{box-sizing:border-box}input:focus-visible,[role=button]:focus-visible{outline:2px solid #2089dc;outline-offset:3px}</style></head><body><div id="root"></div><script src="./rne.bundle.js"></script></body></html>