Avant de continuer à travailler sur les composants et d'approfondir React Native, abordons le style. Actuellement, nous avons ajouté trois éléments à notre projet, mais la présentation visuelle peut nécessiter des améliorations.

Styles en ligne

Les styles en ligne dans React Native sont similaires à la façon dont vous écrivez des styles dans React classique pour le web. Les styles sont passés sous forme d'objets directement dans les props du composant.

Théorie

• Les styles en ligne permettent d'appliquer rapidement et simplement des styles directement à un composant ;
• Les styles en ligne utilisent des objets JavaScript pour définir des styles directement dans les props du composant ;
• Chaque propriété de style est écrite en camelCase, similaire à la façon dont c'est fait en CSS, mais sans tirets ;
• Les valeurs peuvent être soit des chaînes de caractères, soit des nombres, selon la propriété.

Exemple

StyleSheet

React Native encourage l'utilisation de l'API StyleSheet pour définir les styles, notamment pour l'optimisation des performances.

Théorie

• La méthode StyleSheet.create est utilisée pour créer un objet de style optimisé ;
• Les styles créés avec StyleSheet.create sont traités pendant le temps de construction, ce qui entraîne de meilleures performances par rapport aux styles en ligne ;
• Les propriétés de style sont définies dans le même format camelCase que les styles en ligne ;
• L'objet résultant est ensuite référencé dans le composant.

Exemple

Résultat après avoir mis en œuvre l'une des approches.

En Pratique