Erhalten Sie CSS-Eigenschaftswerte aus einer "style" prop-Komponente

Question

Ich schreibe eine React Native-Komponente für eine Bibliothek, und ich möchte Benutzer in der Lage sein, es mit der style -Eigenschaft, wie React.View und anderen integrierten Komponenten zu stylen.

Da jedoch meine Komponente tatsächlich aus ein paar verschachtelte Ansichten besteht, muss ich einige Berechnungen durchführen, um herauszufinden, welches Styling auf die inneren setzen. Zum Beispiel muss ich möglicherweise die Größe eines Bildes basierend auf der Dicke eines Rahmens anpassen oder eine Hervorhebungsfarbe basierend auf der gegebenen Textfarbe anpassen oder auf andere Weise ein Stück Styling von einem anderen Stück Styling ableiten .

Um dies zu tun, ich brauche die eigentlichen CSS-Eigenschaften extrahieren zu können (wie borderWidth: 2 oder backgroundColor: 'pink') aus, was auch immer als style prop geben wird. Dies ist in Ordnung, solange es als einfaches Objekt kommt, aber es kann auch das Ergebnis eines Aufrufs an React.StyleSheet.create sein. Dies scheint ein undurchsichtiges Objekt zu sein, bei dem alle Selektoren einfach numerischen IDs zugeordnet sind.

Wie kann ich diese lösen und die tatsächlichen CSS-Eigenschaften erhalten, um etwas komplizierter mit ihnen als einfach nur weiter zu einem View?

Answer 1

Der eingebaute in StyleSheet.flatten Funktion (oder die identische flattenStyle-Funktion) kann alles drehen, die berechtigterweise auf die style prop in ein Objekt Mapping CSS-Eigenschaft Namen auf Werte übergeben werden können. Es funktioniert mit einfachen Objekten, IDs, die von StyleSheet.create() zurückgegeben werden, und Arrays.

Beispiel für die Verwendung der Breite in der style prop angegeben zu überprüfen innerhalb einer Komponentendefinition:

import { StyleSheet } from 'react-native' 

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

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

Answer 2

Sie müssen importieren StylesheetRegistry:

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

im Stil ID passieren Dann:

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

Answer 3

Bitte schauen Sie auf https://github.com/vitalets/react-native-extended-stylesheet#underscored-styles

Stil über erweiterte Stylesheet enthält in Originalwerten erstellt Unterstrichene Requisite:

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

In Laufzeit:

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