Enveloppez vos composants natifs de React

Note: Ce post est vieux. Je ne pense pas que je dirais quand même que l ’« encapsulation »des éléments de texte est la meilleure pratique. Au lieu de cela, j’ai défini la demi-douzaine de styles de police que j’ai utilisés dans un fichier séparé, pouvant être importés et répartis au besoin en définitions de style (ou d’émotion).

On pourrait penser que, puisque les composants React Native essentiels sont des classes, ils devraient être étendus. Mais comme Dan Abramov l’a déclaré, ce n’est pas une si bonne idée. Vous pouvez implémenter des composants d'ordre supérieur, mais ce dont vous avez probablement besoin est simplement de remplacer l'utilisation de certains composants natifs de react-core par quelque chose d'un peu plus puissant. C’est là que l’emballage entre en jeu.

En encapsulant simplement un composant RN essentiel dans un peu de fonctionnalité de l'interface utilisateur, vous conservez votre code propre et définissez également des propriétés globales. Pour les développeurs expérimentés, parcourez vos feuilles de style et déterminez combien de fois vous avez utilisé Feuille de style pour traiter les problèmes de mise en page. Voulez-vous vous en débarrasser? J'ai fait. Pour les novices, j'espère que cet article vous aidera à apprendre la flexbox en vous fournissant un outil qui la simplifie considérablement.

Ce graphique montre comment cela fonctionne en bref. Je vais y revenir plus tard. Mais je veux d’abord préciser pourquoi il est si important d’envelopper certains composants de base RN dans votre propre code personnalisé.

Ceci est juste un exemple d'un composant encapsulé que j'adore utiliser et qui est open source. Mais vous constaterez plus souvent que vous devez envelopper le vôtre. Je vais t'expliquer.

J’ai créé deux applications natives réactives publiées et, après avoir refacturé le dernier projet, j’ai décidé qu’il y avait trois choses à faire.

  1. Texte
  2. Palpable
  3. Vue

Pour être clair, le retour à la ligne signifie que vous importerez et utiliserez votre propre composant Text de src au lieu de celui de RN. Le vôtre va envelopper ça.

Texte

Vous devez presque envelopper le texte pour deux raisons. Une des raisons est que vous ne souhaitez pas importer et déclarer la même police de caractères dans tous les composants de votre application. Vous souhaitez définir une police comme police par défaut pour tous les composants de texte ou pouvoir facilement basculer d'une police à l'autre.

Une autre raison concerne un problème plus vaste que vous devez comprendre à propos de l'interface utilisateur React Native. FontSize est une quantité de pixels qui apparaîtra différemment sur différents appareils avec des résolutions différentes. Ceci est également vrai pour la hauteur, la largeur, la marge, le rembourrage et le positionnement absolu. C’est pourquoi vous devriez toujours essayer d’utiliser flex pour les mises en page lorsque cela est possible. Sinon, envisagez d’utiliser getPixelSizeForLayoutSize pour définir ces propriétés. C’est pénible, mais considérez-le comme une raison pour essayer d’abord de tout accomplir avec la flexbox.

Pour Text, toutefois, vous devez éviter de définir fontSize comme un pixel. Je vais simplement vous montrer ce que j’utilise, empruntant à ce post SO.

Essentiellement, ce type d’emballage permet de mapper les accessoires aux styles. Certains pourraient considérer cela comme un anti-motif, mais le résultat est un outil formidable pour le développeur qui a l'esprit minimal. Au lieu d’importer du texte depuis ‘react-native’, vous devez plutôt l’importer depuis ‘/components/Text.js’ ou ailleurs.

Les accessoires exposés doivent couvrir la majorité de vos styles. Vous n'avez donc peut-être pas besoin de créer une entrée de feuille de style.

C’est comme ça que je l’utilise. C’est assez propre et je sais à quoi ce texte ressemblera sans avoir à faire référence à une feuille de style.

Palpable

Il existe de nombreux modules pour encapsuler ceci, bien qu'aucun ne soit trop populaire, mais le point essentiel est que Touchable (NativeFeedback, etc.) est géré différemment sur iOS et Android. Vous ne devriez donc pas importer cela de React. Originaire de. Vous pouvez également trouver de nombreuses implémentations de Button, mais elles ont tendance à avoir des styles intégrés.

Vue

Pour View, je vous suggère de consulter mon composant react-native-row.

J'ai décidé de quelque chose après avoir entrepris de refacturer l'interface utilisateur de ma dernière application. J’ai réalisé que plutôt que de trouver des éléments réutilisables qui méritaient leur propre déclaration, c’était plutôt de trouver des scènes dont les éléments n’étaient pas utilisés dans d’autres scènes.

J'ai pensé à d'autres moyens de réduire l'encombrement. Je me suis souvenu d'avoir dû définir flexDirection: row alors que c'était souvent la seule propriété à définir. J'ai commencé par créer un wrapper autour de View pour faire exactement cela. Mais ensuite, j'ai remarqué autant de fois que je n'avais utilisé que alignItems et JustContents.

Je me contentai de dire que je finis par créer une enveloppe qui faisait quelque chose que j'espérais à moitié. Cela rendait mes déclarations de feuille de style inutiles.

Commençons par cette scène. C'est un écran de gestion de profil. Il n’ya pas de composants réutilisables ici à part les boutons et peut-être le logo. Il existe un composant ScrollView que je ne prévois vraiment utiliser nulle part ailleurs dans l’application.

L’objectif principal de cette page est donc d’arranger des éléments, dont beaucoup sont du texte.

En regardant le code de la partie supérieure de la page, vous pouvez voir un peu de mélange de styles intégrés et d'utilisation de la feuille de style. Pas idéal, mais les avantages de l'un sur l'autre ne m'ont jamais convaincu d'éliminer l'un ou l'autre par convention.

J'ai un peu changé cela, en reconnaissant la négligence et l'utilisation de styles incorrects, mais des choses comme celles-ci se sont produites parce que je n'ai jamais trouvé un «meilleur» moyen de gérer les styles. Mais sommes-nous vraiment en train de déclarer des «styles» ici? Tout ce qui est en dehors des styles de texte concerne vraiment la mise en page.

J’ai décidé de ne plus avoir à nous demander où traiter les styles de présentation, car avec Flexbox, ils ne sont pas vraiment des styles. Flexbox mérite sa propre place en dehors des styles car elle est si puissante, mais souvent mal comprise.

Regardez ce qui se passe lorsque nous remplaçons la mise en page de flexbox par quelque chose de plus intuitif et concis.

Assez simple?

Remarque sur react-native-row: Row est une vue avec flexDirection: 'row' et le cadran définissent la position de tous les composants enfants sur le numéro 5 de la numérotation téléphonique - et flex, utilisé ici comme booléen, définit le propriété flex à 1.

À l’aide de react-native-row et du composant Text ci-dessus, j’ai complètement sorti toutes les propriétés de la flexbox et rendu ma scène plus réactive.

Pensées?

Je ne suis pas un expert de React, mais j’ai passé une année chez React Native et c’est ce qui me semble logique. Y a-t-il une meilleure façon de mettre cela en œuvre Probablement. Est-ce un anti-modèle? Peut être. J'aimerais entendre ce que les gens pensent.