• 30 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 09/09/2020

Appliquez des styles à vos components

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Nous venons de créer notre tout premier component, mais, on ne va pas se mentir, il est quasi inutilisable en l'état. En tout cas, le TextInput pour saisir du texte est inaccessible, masqué par la barre de statut du device. Il est temps d'ajouter une couche de peinture pour styliser tout cela et rendre notre component fonctionnel.

Dans ce chapitre, nous allons faire le tour des possibilités pour styliser nos components. Le point le plus important est de bien comprendre comment fonctionnent les différents types de style et comment les appliquer. Par exemple, si vous voulez changer la couleur d'un élément, vous appliquez un style sur celui-ci. Si vous voulez l'aligner en bas dans une vue, vous appliquez un style sur son élément parent. Cela a l'air compliqué, mais, dans les faits, c'est très simple, vous allez voir.

Propriété style des components

Tous les components React Native possèdent une propriété style. Cette propriété est définie par React Native sur ses components et vous permet, comme son nom l'indique, d'y appliquer des styles. Parmi les styles que l'on applique, le plus souvent, il y a : 

  • Changer une couleur

  • Définir une taille

  • Ajouter des marges

  • Modifier l'alignement d'éléments entre eux

  • Ajouter des bordures

  • Etc.

On va commencer par régler tout de suite ce problème de TextInput masqué par la barre de statut. Dans notre component Search, on va appliquer un style sur le TextInput pour qu'il soit visible et accessible :

// Components/Search.js
render() {
return (
<View style={{ marginTop: 20 }}>
<TextInput placeholder='Titre du film'/>
<Button title='Rechercher' onPress={() => {}}/>
</View>
)
}

 Qu'a-t-on fait exactement ici ?

On a tout simplement appliqué une marge en haut de 20 (par défaut, c'est en pixels) sur notre View. Cette marge s'applique entre le haut de l'écran et notre View. Retournez sur notre application, rechargez-la si nécessaire ; vous devriez voir le TextInput accessible à présent :

TextInput accessible grâce à notre marginTop de 20
TextInput accessible grâce à notre marginTop de 20

Cela ne reste vraiment pas terrible, je vous l'accorde. :lol: Mais on va améliorer ce rendu.

On va continuer à styliser notre vue :

// Components/Search.js
render() {
return (
<View style={{ marginTop: 20 }}>
<TextInput style={{ marginLeft: 5, marginRight: 5, height: 50, borderColor: '#000000', borderWidth: 1, paddingLeft: 5 }} placeholder='Titre du film'/>
<Button title='Rechercher' onPress={() => {}}/>
</View>
)
}

Ici, on a :

  • ajouté des marges à gauche et à droite du TextInput pour qu'il ne soit pas collé aux bords de notre vue (  marginLeft  /  marginRight  ).

  • défini une hauteur de 50 (pixels) pour notre TextInput (  height  ).

  • ajouté une bordure noire tout autour du TextInput (  borderWidth  /  borderColor  ).

  • ajouté un padding à gauche pour que le placeholder et le texte saisi ne collent pas à la bordure du TextInput (  paddingLeft  ).

C'est plutôt simple et compréhensible, non ? :ange:

Vous pouvez retrouver la liste des styles possibles pour les components React Native sur la documentation React Native. Personnellement, je trouve que c'est assez mal fait et apparemment, je ne suis pas le seul. On passe beaucoup de temps à chercher. Du coup, un contributeur a répertorié la liste complète sur GitHub.

Allez jeter un œil à cette liste. Tout ce qui se trouve dans Flexbox est commun à tous les components React Native et vous pouvez utiliser ces styles partout. Ensuite, il y a des styles propres à chaque component React Native. Par exemple, on a le style  textAlign  uniquement sur le component Text, ou encore  maxLength  sur le component TextInput.

Au fait, vous avez remarqué que, depuis le début de ce chapitre, je ne parle que des components React Native. Je ne parle jamais d'appliquer de propriété style sur un component custom. C'est tout simplement parce que l'on ne peut pas. 

On ne peut appliquer de style que sur les components React Native. Retenez bien cette information.

Prenons l'exemple d'appliquer une couleur de fond sur notre component custom Search. Vous seriez tenté de faire :

// App.js
<Search style={{backgroundColor: 'red'}}/>

Il faut appliquer le style sur le component React Native représentant la vue de votre component, c'est-à-dire, ici, le component View :

// Components/Search.js
<View style={{ marginTop: 20, backgroundColor: 'red' }}>
<TextInput .../>
<Button .../>
</View>

À présent, vous devriez voir la couleur de fond apparaître. :magicien: Pensez-y : propriété style = component React Native. (Pensez à enlever la couleur de fond après vos tests, on ne va pas laisser ce rouge sur notre vue.)

Vous savez à présent comment définir des styles sur vos components React Native. Avec cela, vous êtes déjà en mesure de créer des vues plutôt sympas, mais on ne va pas s'arrêter là. Vous avez vu que lorsque l'on définit plusieurs styles sur un component React Native, comme sur notre TextInput, cela devient vite illisible dans notre code :

<TextInput style={{ marginLeft: 5, marginRight: 5, height: 50, borderColor: '#000000', borderWidth: 1, paddingLeft: 5 }} placeholder='Titre du film'/>

Et si vous souhaitez appliquer ce même style sur un autre component React Native, vous serez obligé de faire un copier-coller et ça, c'est hors de question. :p Je vais vous montrer comment externaliser vos styles pour les réutiliser à plusieurs endroits et, par la même occasion, éclaircir votre code.

Externalisez ses styles

En React Native, et en React tout court, on a pour habitude de définir nos styles en dehors de la classe de notre component custom.

Je vous invite donc à créer une constante styles en bas de notre fichier Javascript, juste avant l'export de notre component custom, comme ceci :

// Search.js
// ...
const styles = {
}
export default Search

Nous allons créer un style spécialement pour notre TextInput, qui reprend exactement les styles appliqués actuellement :

const styles = {
textinput: {
marginLeft: 5,
marginRight: 5,
height: 50,
borderColor: '#000000',
borderWidth: 1,
paddingLeft: 5
}
}

Maintenant, on va remplacer la longue liste de styles définis sur le component TextInput par cette nouvelle propriété :

<TextInput style={styles.textinput} placeholder='Titre du film'/>

Et voilà ! C'est aussi simple que cela, l'externalisation de style. Vous pouvez recharger votre application, vous verrez, rien n'a changé. Votre TextInput possède toujours le style qu'on lui a appliqué dans la première partie de ce chapitre.

Vous remarquez que l'on gagne énormément en termes de lisibilité de code. La méthode  render  de notre component custom n'est plus surchargée par des définitions de style à rallonge. Il devient beaucoup plus facile d'appliquer des styles à nos components.

De plus, en externalisant ses styles, on peut facilement les réutiliser sur d'autres components React Native. Rien ne vous empêche d'appliquer ce style sur votre bouton également :

<Button style={styles.textinput} title='Rechercher' onPress={() => {}}/>

Bon ici, cela n'a pas vraiment d'intérêt, je vous l'accorde, mais c'est possible. Cela vous sera très utile quand vous souhaiterez appliquer le même style sur plusieurs éléments.

Plusieurs styles externalisés

Dernier point sur l'externalisation de style. Vous pouvez appliquer plusieurs styles externalisés sur un component React Native. La syntaxe change un tout petit peu pour gérer des tableaux de styles, mais vous pouvez très bien faire :

const styles = {
textinput1: {
...
},
textinput2: {
...
}
}

Et appliquer ces styles à notre component TextInput, comme ceci :

<TextInput style={[styles.textinput1, styles.textinput2]} placeholder='Titre du film'/>

On peut également mixer l'utilisation de style externalisé avec la déclaration de style directement sur le component React Native. Par exemple :

<TextInput style={[styles.textinput, { marginBottom: 10 }]} placeholder='Titre du film'/>

Ce n'est pas plus compliqué que ça. :)

On utilise au maximum les styles externalisés pour découper ses components custom en deux parties bien distinctes :

  • Une partie définition des components React Native, que l'on retrouve dans la méthode  render

  • Une partie style définie dans une constante externe à notre component custom

De plus, en externalisant ses styles, on peut facilement appliquer une API de React Native ; j'ai nommé : StyleSheet.

StyleSheet

StyleSheet est une API React Native permettant d'augmenter les performances de vos styles dans votre application.

Comment ça marche ?

  • Sans StyleSheet, à chaque fois que votre application appelle un style, un nouvel objet avec votre style est créé. 

  • Avec StyleSheet, votre style est associé à un identifiant. Chaque fois que votre application appelle votre style, StyleSheet utilise l'identifiant pour récupérer l'objet avec votre style.  

Je m'arrête ici, je ne rentre pas dans les détails techniques, cela n'a que peu d'intérêt. Retenez simplement que StyleSheet augmente les performances de votre application en associant votre style à un identifiant.

Nous allons utiliser cette API (même si elle reste facultative)sur TOUS nos styles externalisés.

La première étape pour utiliser l'API StyleSheet, c'est de l'importer :

// Components/Search.js
import { StyleSheet, View, TextInput, Button } from 'react-native'

Ensuite, on va modifier la déclaration de notre constante styles pour que tous nos styles externalisés utilisent l'API :

// Components/Search.js
const styles = StyleSheet.create({
textinput: {
marginLeft: 5,
marginRight: 5,
height: 50,
borderColor: '#000000',
borderWidth: 1,
paddingLeft: 5
}
})

Et voilà ! Ni plus ni moins. À présent, tous vos styles externalisés utilisent l'API StyleSheet et votre application va être plus performante. Bon, ne vous attendez pas à un changement spectaculaire, c'est visible lorsque l'on développe de grosses applications. :)

Ce sera tout pour ce chapitre. On a pu découvrir comment créer un style et l'externaliser. Vous voyez que ce n'est pas très compliqué. Les styles vont vous permettre de customiser votre application comme bon vous semble et l'externalisation va vous permettre d'y voir plus clair. C'est très important de bien découper son code, il n'y a rien de pire qu'un énorme bloc avec tout dedans. Pensez aux copains développeurs qui vont travailler avec vous. ^^

Je n'en ai pas fini avec les styles. Rappelez-vous, j'ai parlé de Flexbox dans ce chapitre en disant qu'on le découvrirait plus tard. Et bien, c'est le moment. Flexbox est indispensable pour réaliser des applications mobiles avec React Native et je vous explique pourquoi dans le prochain chapitre.

Exemple de certificat de réussite
Exemple de certificat de réussite