J'écris un composant React Native pour une bibliothèque et je veux que les utilisateurs puissent le styliser en utilisant la propriété style, tout comme React.View et d'autres composants intégrés.

Cependant, comme mon composant est en fait composé de quelques vues imbriquées, j'ai besoin de faire quelques calculs pour déterminer quel style mettre sur celles internes . Par exemple, je pourrais avoir besoin d'ajuster la taille d'une image en fonction de l'épaisseur d'une bordure autour d'elle, ou d'ajuster une couleur de surbrillance en fonction de la couleur de texte donnée, ou d'une autre manière déduire un élément de style à partir d'un autre élément de style .

Pour ce faire, je dois être capable d'extraire les propriétés CSS réelles (comme borderWidth: 2 ou backgroundColor: 'pink') de tout ce qui est passé en tant que prop style. C'est très bien tant qu'il s'agit d'un objet simple, mais cela peut aussi être le résultat d'un appel à React.StyleSheet.create. Cela semble être un objet opaque avec tous les sélecteurs simplement mappés à des identifiants numériques.

Comment puis-je les résoudre et obtenir les propriétés CSS réelles, afin de faire quelque chose de plus compliqué avec eux que de simplement les transmettre directement à un View?

14
Mark Amery 4 janv. 2016 à 02:30

3 réponses

Meilleure réponse

La fonction StyleSheet.flatten intégrée (ou la une flattenStyle fonction) peut transforme tout ce qui peut légitimement être passé à la propriété style en un objet mappant les noms de propriétés CSS aux valeurs. Il fonctionne sur les objets simples, les ID retournés par StyleSheet.create() et les tableaux.

Exemple d'utilisation pour vérifier la largeur spécifiée dans la prop style à partir d'une définition de composant:

import { StyleSheet } from 'react-native'

// ... then, later, e.g. in a component's .render() method:

let width = StyleSheet.flatten(this.props.style).width;
29
Mark Amery 8 juil. 2018 à 13:03

Vous devez importer la feuille de styleRegistry:

StyleSheetRegistry = require("../../node_modules/react-native/Libraries/StyleSheet/StyleSheetRegistry"),

Passez ensuite l'ID de style:

var style = StyleSheetRegistry.getStyleByID(this.props.style)
-1
John Shammas 4 janv. 2016 à 18:07

Veuillez consulter https://github.com/vitalets/react- native-extended-stylesheet # underscored-styles

Le style créé via une feuille de style étendue contient des valeurs d'origine dans un accessoire souligné:

const styles = EStyleSheet.create({
  text: {
    fontSize: '1rem',
    color: 'gray'
  }
});

Au runtime:

styles = {
  text: 0,
  _text: {
    fontSize: 16,
    color: 'gray'
  }
}
-1
vitalets 5 févr. 2016 à 10:53