Ottieni valori di proprietà CSS dal puntello "stile" di un componente

Question

Sto scrivendo un componente React Native per una libreria e voglio che gli utenti siano in grado di modificarlo utilizzando la proprietà style, proprio come React.View e altri componenti incorporati.

Tuttavia, dato che il mio componente è in realtà costituito da un paio di vista nested, ho bisogno di fare alcuni calcoli per capire che cosa styling per mettere sulle interne quelli. Ad esempio, potrei aver bisogno di regolare il dimensionamento di un'immagine in base allo spessore di un bordo attorno ad esso, o regolare un colore di evidenziazione basato sul colore del testo dato, o in qualche altro modo dedurre un pezzo di stile da un altro pezzo di stile .

Per fare ciò, devo essere in grado di estrarre le proprietà CSS effettive (come borderWidth: 2 o backgroundColor: 'pink') da tutto ciò che viene passato come il puntello style. Questo va bene fintanto che viene come un oggetto semplice, ma potrebbe anche essere il risultato di una chiamata a React.StyleSheet.create. Questo sembra essere un oggetto opaco con tutti i selettori semplicemente mappati su ID numerici.

Come posso risolvere questi e ottenere le proprietà CSS effettive, al fine di fare qualcosa di più complicato con loro che semplicemente passandoli direttamente su un View?

Answer 1

Il built-in StyleSheet.flatten funzione (o la funzione identica flattenStyle) può trasformare tutto ciò che può legittimamente essere passato al puntello style in un oggetto di mapping nomi delle proprietà CSS per i valori. Funziona su oggetti semplici, ID restituiti da StyleSheet.create() e array.

Esempio di utilizzo per controllare la larghezza specificata nel prop style dall'interno di una definizione dei componenti:

import { StyleSheet } from 'react-native' 

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

let width = StyleSheet.flatten(this.props.style); 

Answer 2

è necessario importare StylesheetRegistry:

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

Poi passare l'ID stile:

var style = StyleSheetRegistry.getStyleByID(this.props.style) 

Answer 3

prega di dare un'occhiata su https://github.com/vitalets/react-native-extended-stylesheet#underscored-styles

Style creato tramite foglio di stile esteso contiene i valori originali in puntello sottolineato:

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

In fase di esecuzione:

styles = { 
    text: 0, 
    _text: { 
    fontSize: 16, 
    color: 'gray' 
    } 
}