Angenommen, ich habe eine Komponente mit einem Render wie diesem:
<View style={jewelStyle}></View>
Wo juwelStyle =
{
borderRadius: 10,
backgroundColor: '#FFEFCC',
width: 20,
height: 20,
},
Wie kann ich die Hintergrundfarbe dynamisch und zufällig zuordnen? ich habe es versucht
{
borderRadius: 10,
backgroundColor: getRandomColor(),
width: 20,
height: 20,
},
Dadurch haben alle Instanzen von View dieselbe Farbe. Ich möchte, dass jede Instanz einzigartig ist.
Irgendwelche Tipps?
css
reactjs
react-native
Pete Thorne
quelle
quelle
Stylesheet.create()
?Ja, Sie können und sollten Sie tatsächlich verwenden
StyleSheet.create
, um Ihre Stile zu erstellen.Und dann:
quelle
StyleSheet.flatten
nur die Optimierung,StyleSheet.create
wie in den Dokumenten angegeben: "HINWEIS: Seien Sie vorsichtig, da ein Missbrauch dies in Bezug auf Optimierungen belasten kann. IDs ermöglichen Optimierungen über die Brücke und den Speicher im Allgemeinen. Wenn Sie direkt auf Stilobjekte verweisen, werden Sie davon abgehalten." diese Optimierungen. " ( facebook.github.io/react-native/docs/stylesheet.html ).Wenn Sie dennoch
StyleSheet.create
dynamische Stile nutzen möchten und diese auch haben möchten , probieren Sie Folgendes aus:Beachten Sie, wie die
style
Eigenschaft vonView
als Array festgelegt wird, das Ihr Stylesheet mit Ihren dynamischen Styles kombiniert.quelle
Das einfachste ist meins:
quelle
Hatte syntaktisch ein Problem. Das hat bei mir funktioniert
quelle
Du wirst so etwas wollen:
In diesem Beispiel nehme ich das Zeilenarray, das die Daten für die Zeilen in der Komponente enthält, und ordne es einem Array von Textkomponenten zu. Ich verwende Inline-Stile, um die
getRandomColor
Funktion jedes Mal aufzurufen, wenn ich eine neue Textkomponente erstelle.Das Problem mit Ihrem Code ist, dass Sie den Stil einmal definieren und getRandomColor daher nur einmal aufgerufen wird - wenn Sie den Stil definieren.
quelle
Ich weiß, dass dies extrem spät ist, aber für alle, die sich noch fragen, ist hier eine einfache Lösung.
Sie können einfach ein Array für die Stile erstellen:
Die zweite Option überschreibt alle ursprünglichen Hintergrundfarben, wie im Stylesheet angegeben. Dann haben Sie eine Funktion, die die Farbe ändert:
Dies erzeugt eine zufällige Hex-Farbe. Rufen Sie dann einfach diese Funktion auf, wann immer und bam, neue Hintergrundfarbe.
quelle
Ich weiß, dass es mehrere Antworten gibt, aber ich denke, das Beste und Einfachste ist die Verwendung eines Status. "Ändern" ist der Statuszweck.
}}
quelle
Sie können den Statuswert direkt an das Stilobjekt binden. Hier ist ein Beispiel:
quelle
Ja, Sie können dynamische Stile erstellen. Sie können Werte von Komponenten übergeben.
Erstellen Sie zuerst StyleSheetFactory.js
Verwenden Sie es dann wie folgt in Ihrer Komponente
quelle
Die Verwendung des Objektverbreitungsoperators "..." hat bei mir funktioniert:
quelle
Wenn Sie beispielsweise einen Bildschirm mit Filtern verwenden und den Hintergrund des Filters festlegen möchten, ob er ausgewählt wurde oder nicht, können Sie Folgendes tun:
Auf welchem eingestellten Filter befindet sich:
PS: Die Funktion
this.props.setVenueFilter(filters)
ist eine Redux-Aktion undthis.props.venueFilters
ein Redux-Zustand.quelle
Für den Fall, dass jemand Bedingungen anwenden muss
quelle
Folgendes hat bei mir funktioniert:
Aus irgendeinem Grund war dies die einzige Möglichkeit, meine ordnungsgemäß zu aktualisieren.
quelle