Y a-t-il un moyen de changer le style de l’application?
C’est possible?
Oui, mais uniquement dans les interfaces ouvertes une fois que l’utilisateur a sélectionné son projet.
C’est du CSS?
Non, la syntaxe est proche mais non.
https://facebook.github.io/react-native/docs/style
Quelles différences?
- Toutes les règles CSS n’ont pas leurs équivalentes sur le mobile, et inversement.
- Il n’y a pas le système de cascade/héritage du CSS. Il n’y a qu’un seul niveau/sélecteur: la classe.
Est-ce judicieux de modifier le style?
Non, dans la plupart des cas.
Pourquoi?
- Homogénéisation du style global de l’application.
- L’application évolue avec les mises à jours. Un ajout de fonctionnalité sur un composant qui entrainerait une modification graphique de celui-ci peut casser si un style personnalisé est appliqué.
Que faire dans ce cas là?
Cela va dépendre de la modification souhaitée.
Si le but est de la modification est d’améliorer le rendu visuel d’un composant, il est possible que cela interesse l’équipe Framework et que cela doit être ajouté par défaut dans l’application.
Une autre solution est de repenser son interface pour s’accorder avec son média.
L’affichage d’une application est dépendante de différents critères tel que la taille de l’écran, la résolution, et les paramètres d’affichage de l’utilisateur. Il ne faut pas penser son interface comme un bloc fixe qui s’affichera de la même manière dans toutes les situations.
Exemple: “Un texte sur un bouton est trop long”
C’est surement un soucis de conception autour du bouton dans le projet Epicraft.
Il vaudrait mieux déplacer le texte explicatif en dehors de celui-ci pour que sa taille ne devienne pas trop imposante et sans rendre le texte illisible.
Comment changer le style?
Il faut ajouter un fichier supplémentaire au chargement du projet dont le nom est style.
https://epiconcept-paris.github.io/epidocs/voozanoo_mobile_bulkaddons.html#the-manifest
https://epiconcept-paris.github.io/epidocs/voozanoo_mobile_voozanoo4_doc.html#other-files—optional
Exemple de manifest
{
"structure": {
"version": "123",
"token": "structure-123"
},
"files": {
"build": {
"version": "123",
"token": "build-123"
},
"style": {
"version": "123",
"token": "style-123"
}
}
}
Exemple de contenu du fichier style
return {
header: {
backgroundColor: '#ff55Ff'
},
btn: {
padding: 5
}
};
Comment connaitre le nom de la classe qui doit être utilisée pour cibler mon élément?
Liste en construction.
Si l’élément n’est pas présent, le mieux est d’aller analyser directement le code de l’application mobile pour récupérer le nom de la classe.
https://github.com/Epiconcept-Paris/epimob-reactnative
| Element | Nom de la classe | URL |
|---|---|---|
| Bouton | btn | button.android.js#L52 |
| Texte du Bouton | btnText | button.android.js#L28 |