Discussion :

[hmscompagnie]

Bonjour,

Je me demandais si en React Native il était possible d'externaliser les styles dans un fichier séparé. Comme on fait un fichier .css pour un site.
Dans tous les exemples que j'ai vu, le style peut être regroupé en fin de component grâce à StyleSheet.
Mais peut-on faire un style commun à plusieurs components dans un fichier séparé ? Quelle serait l'extension de ce fichier ?

[hmscompagnie]

J'ai fait une série de tests et donc la réponse est oui.

J'ai fait un fichier Styles.js qui ressemble à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
import { StyleSheet} from 'react-native';
 
 
const Styles = StyleSheet.create ({
  main_container: {
    flex: 1
  },
  text: {
    fontWeight: 'bold',
    textAlign: 'center'
  }
})
 
export default Styles;

Ensuite il suffit d'importer le fichier, par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

import Styles from '../Components/Styles';

Et de l'utiliser :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<Text style={Styles.text}>Ceci est du texte</Text>