Style natif de React: composants stylisés, dispositions Flexbox, etc.

React Native fournit une API pour créer des feuilles de style et styliser vos composants: StyleSheet.

import React, { Component } from 'react'; import { StyleSheet, View, Text } from 'react-native'; export default class App extends Component { render () { return (  I am a header! I am some blue text.  ); } } const styles = StyleSheet.create({ header: { fontSize: 20 }, text: { color: 'blue' } });

Bien que les feuilles de style CSS classiques ne soient pas valides, le sur-ensemble de CSS de React Native est très similaire au CSS traditionnel.

De nombreuses propriétés CSS (par exemple color, height, top, right, bottom, left) sont les mêmes dans StyleSheet. Toutes les propriétés CSS qui ont des traits d'union (par exemple font-size, background-color) doivent être remplacées par camelCase (par exemple fontSize, backgroundColor).

Toutes les propriétés CSS n'existent pas dans StyleSheet. Puisqu'il n'y a pas de véritable concept de survol sur les appareils mobiles, les propriétés de survol CSS n'existent pas dans React Native. Au lieu de cela, React Native fournit des composants tactiles qui répondent aux événements tactiles.

Les styles ne sont pas non plus hérités comme ils le sont dans le CSS traditionnel. Dans la plupart des cas, vous devez déclarer le style de chaque composant.

Dispositions Flexbox

React Native utilise une implémentation de flexbox similaire au standard Web. Par défaut, les éléments de la vue seront définis sur display: flex.

Si vous ne souhaitez pas utiliser flexbox, vous pouvez également organiser les composants React Native via relativeou par absolutepositionnement.

Flexbox dans React Native utilise par défaut flexDirection: column, au lieu de flex-direction: row(standard Web). La columnvaleur affiche les éléments flexibles verticalement, ce qui prend en charge les appareils mobiles en orientation portrait.

Pour en savoir plus sur flexbox, visitez ce guide détaillé sur les astuces CSS et une approche d'apprentissage ludique avec Flexbox Froggy.

Composants stylisés

Inclure de nombreux styles dans un fichier avec un composant n'est pas toujours facile à gérer. Les composants stylisés peuvent résoudre ce problème.

Par exemple, un composant Button peut être utilisé à plusieurs endroits dans une application. Copier et coller l'objet de style avec chaque occurrence de Button serait inefficace. À la place, créez un composant Button réutilisable et stylisé:

import React from 'react'; import { Text, TouchableOpacity } from 'react-native'; const Button = ({ onPress, children }) => { const { buttonStyle, textStyle } = styles; return (   {children}   ); }; export default Button; const styles = { textStyle: { alignSelf: 'center', color: '#336633', fontSize: 16, fontWeight: '600', paddingTop: 10, paddingBottom: 10 }, buttonStyle: { backgroundColor: '#fff', borderWidth: 1, borderColor: '#336633', paddingTop: 4, paddingBottom: 4, paddingRight: 25, paddingLeft: 25, marginTop: 10, width: 300 } };

Le composant Button stylisé peut être facilement importé et utilisé dans toute l'application sans déclarer l'objet de style à plusieurs reprises:

import React, { Component } from 'react'; import { TextInput, View } from 'react-native'; import Button from './styling/Button'; export default class Login extends Component { render() { return (    Log In  ); } }

Bibliothèques de style

Il existe quelques bibliothèques populaires pour styliser React Native. Certains d'entre eux fournissent des fonctionnalités similaires à Bootstrap, notamment des formulaires par défaut, des styles de boutons et des options de mise en page.

L'une des bibliothèques les plus populaires est celle des composants stylisés. Il y en a beaucoup d'autres que vous pouvez trouver sur npm et GitHub pour essayer par vous-même.