React Native - Créer un écran iPad personnalisé dans React Native

La semaine dernière, j’améliorais ma propre application React Native. Cela fonctionne très bien sur les appareils mobiles. Cependant, je voulais apporter un support pour l’iPad car tous les écrans pouvaient permettre moins d’étapes. Et nous pouvons profiter des menus secondaires de celui-ci.

Mais dans le flux mobile actuel, j’ai différents écrans pour exécuter une tâche spécifique. Le but d’un écran iPad personnalisé est de mettre une liste (HTTP requests dans ce cas) à gauche et l’écran de contenu à droite.

Depuis que j’utilise React Native Navigation. La seule solution que j’ai trouvée est de créer un écran personnalisé uniquement pour les appareils iPad. Mais, React Native peut-il détecter si un appareil est un iPad? Eh bien, voici la solution.

La valeur isPad

Cette valeur est seulement disponible sur les iOS appareils. Alors, sois prudent avec ça et ajoutez une méthode de validation avant.

Solution

import { Platform } from "react-native";
import IosEcranMobile from "votre-ecran-mobile";
import IosEcranTablette from "votre-ecran-tablette";
import AndroidEcran from "votre-ecran-android";

const EcranPrincipal = () => {
  const siIos = Platform.OS === "ios";
  let siTablette = false;

  if (siIos) {
    siTablette = Platform.isPad;
  }

  return siIos ? siTablette ? <IosEcranTablette /> : <IosEcranMobile /> : <AndroidEcran />;
};

export default EcranPrincipal;

J’ai essayé de rendre le code plus long pour une meilleure compréhension. Et en supposant que tu as trois composants d’écran différents. Un pour les appareils mobiles iOS, un autre pour iPad et le dernier si tu veux un écran Android personnalisé.

Donc, d’abord, on vérifie si l’appareil est vraiment un appareil iOS, et nous préparons la variable siTablet comme false par défaut. Nous n’entrons le conditionnel que s’il correspond à la condition iOS. La constante Platform.isPad est un booléen. Une fois que nous avons cette valeur comme true, nous pouvons rendre notre composant iPad. Seulement pour l’exemple, je l’ai nommé IosEcranTablette. Nous avons les deux autres composants si aucune condition n’a été validée et renvoie s’il s’agit d’un appareil Android ou d’un appareil mobile iOS.