Créer des applications mobiles avec React Native

Auteur: Mohamed CHINY Durée necessaire pour le cours de Créer des applications mobiles avec React Native Niveau recommandé pour le cours de Créer des applications mobiles avec React Native Supports vidéo non disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz non disponibles pour ce cours

Page 14: Rendu conditionnel en React Native

Toutes les pages

Rendu conditionnel en React Native

Afficher ou masquer des composants selon des conditions

En React Native, le rendu conditionnel permet d’afficher dynamiquement des composants selon des conditions. Le rendu conditionnel repose principalement sur deux techniques, à savoir l'opérateur logique && qui permet d'afficher un composant seulement si une condition est vraie, et l’opérateur ternaire (condition ? Traitement 1 : Traitement 2) pour alterner entre deux vues.

Rendu conditionnel avec l'opérateur logique &&

La structure d'un rendu conditionnelle ressemble à ceci:
{condition && <JSX />}
Cela veut dire que le bloc JSX (un ou plusieurs composants) n'est rendu que si la condition est vraie (ou condition==true). Sinon, rien ne sera affiché.

Imaginons que l'on souhaite afficher l'espace personnel d'un utilisateur après qu'il soit authentifié dans l'application. Pour simplifier, nous allons juste afficher le message "Bienvenu dans votre espace personnel". Mais si celui-ci n'est pas authentifier, alors on affiche un formulaire d'authentification classique (login, mot de passe et bouton de validation).
Par souci de simplification, nous n'allons pas traiter le processus d'authentification en soi, mais seulement l'affichage des composants requis à cet effet au cas l'utilisateur n'es pas authentifié.
Je propose le code suivant:
import { useState } from 'react';
import { StyleSheet, View, TextInput, Text, TouchableOpacity } from 'react-native';

export default function App() {
   const [auth,setAuth]=useState(true)
   return (
      <View style={styles.container}>
         {!auth &&
            <>
               <Text style={styles.text}>
                  Authentification requise
               </Text>
               <TextInput placeholder="Login"
               style={styles.input} />
               <TextInput placeholder="Mot de passe"
               style={styles.input} secureTextEntry />
               <TouchableOpacity style={styles.button}>
                  <Text style={styles.buttonLabel}>
                     S'authentifier
                  </Text>
               </TouchableOpacity>
            </>
         }
         {auth &&
            <>
               <Text style={styles.text}>
                  Bienvenue dans votre espace personnel
               </Text>
            </>
         }
      </View>
   );
}

const styles = StyleSheet.create({
   container: {
      flex: 1,
      gap:6,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
   },
   text:{
      fontWeight:"bold",
      fontSize:16,
      padding:6
   },
   input:{
      borderWidth:1,
      width:200
   },
   button:{
      width:200,
      backgroundColor:"#000",
   },
   buttonLabel:{
      color:"#FFF",
      textAlign:"center",
      padding:10
   }
});
Nous avons initialisé un state nommé auth avec la valeur false pour sous entendre que l'utilisateur n'est pas authentifié. Dans ce cas, l'affichage ressemblera à ceci:
Bienvenue dans votre espace personnel
Si on initialiser le state auth avec true, alors on aura cet affichage:
Authentification requise

Expliquons ce qui vient de passer:

Dans le bloc:
{!auth &&
   <>
      <Text style={styles.text}>
         Authentification requise
      </Text>
      <TextInput placeholder="Login"
      style={styles.input} />
      <TextInput placeholder="Mot de passe"
      style={styles.input} secureTextEntry />
      <TouchableOpacity style={styles.button}>
         <Text style={styles.buttonLabel}>
            S'authentifier
         </Text>
      </TouchableOpacity>
   </>
}
nous avons vérifié si auth vaut false, c'est seulement dans ce cas que le bloc JSX qui suivra sera rendu. Nous avons utilisé l'opérateur logique && entre la condition (auth!=true ou auth==false qu'on a abrégé auth) et le bloc JSX à rendre (le formulaire d'authentification).
Vous avez certainement remarqué qu'on a encapsulé le JSX rendu dans <> et </>. On appelle ces délimiteurs React fragment. Il sert à envelopper plusieurs composants JSX dans une sorte de composant virtuel sans utiliser un vrai composant comme <View> ou autre conteneur, ce qui constituerait un nœud supplémentaire qui pourrait par exemple casser la hiérarchie visuelle ou introduire des marges inattendus.
Dans ce bloc:
{auth &&
   <>
      <Text style={styles.text}>
         Bienvenue dans votre espace personnel
      </Text>
   </>
}
nous avons vérifié si auth vaut true, ce qui sous entend que l'utilisateur est déjà authentifié, dans ce cas, on affiche le bloc JSX qui suit en utilisant le même opérateur logique &&.

En résumé, si vous voulez conditionner l'affichage d'un bloc JSX, il suffit de l'associer à l'opérateur logique && et une condition de votre choix. Si cette condition est vraie, alors le JSX est rendu, sinon rien ne sera rendu.
Une erreur fréquente consiste à rendre false ou undefined dans le JSX, ce qui pourrait provoquer des comportements inattendus. Il est donc recommandé de retourner null lorsqu’aucun composant ne doit être affiché.

Rendu conditionnel avec l'opérateur ternaire

L'opérateur ternaire en React Native (et React Web) ressemble à ceci:
{condition ? <JSX1 /> : <JSX2 />}
Autrement dit, si la condition est vraie (condition==true), alors on rend le JSX1, sinon (condition!=true ou condition==false) alors on rend le JSX2.

Donc, l''exemple précédent aura cette forme:
import { useState } from 'react';
import { StyleSheet, View, TextInput, Text, TouchableOpacity } from 'react-native';

export default function App() {
   const [auth,setAuth]=useState(true)
   return (
      <View style={styles.container}>
         {!auth ?
            <>
               <Text style={styles.text}>
                  Authentification requise
               </Text>
               <TextInput placeholder="Login"
               style={styles.input} />
               <TextInput placeholder="Mot de passe"
               style={styles.input} secureTextEntry />
               <TouchableOpacity style={styles.button}>
                  <Text style={styles.buttonLabel}>
                     S'authentifier
                  </Text>
               </TouchableOpacity>
            </>
         :
            <>
               <Text style={styles.text}>
                  Bienvenue dans votre espace personnel
               </Text>
            </>
         }
      </View>
   );
}

const styles = StyleSheet.create({
   container: {
      flex: 1,
      gap:6,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
   },
   text:{
      fontWeight:"bold",
      fontSize:16,
      padding:6
   },
   input:{
      borderWidth:1,
      width:200
   },
   button:{
      width:200,
      backgroundColor:"#000",
   },
   buttonLabel:{
      color:"#FFF",
      textAlign:"center",
      padding:10
   }
});
Vous avez remarqué qu'on a pas changé beaucoup de chose, à l'exception de la structure conditionnelle. En effet, au lieu de vérifier chaque condition séparément (auth==false puis auth==true), nous avons vérifié si auth==false, puis on a rendu le JSX prévu. Sinon (ce qui veut implicitement dire que auth==true), alors on rend l'autre JSX.
Dans ce genre de situation où vous avez deux traitements complémentaires (on exécute l'un ou l'autre), il est recommandé d'utiliser l'opérateur ternaire plutôt que l'opérateur logique &&.