Kann ich in React Native dynamische Stile erstellen?

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?

Normalerweise mache ich etwas in der Art von:

<View style={this.jewelStyle()} />

...

jewelStyle = function(options) {
   return {
     borderRadius: 12,
     background: randomColor(),
   }
 }

Jedes Mal, wenn die Ansicht gerendert wird, wird ein neues Stilobjekt mit einer zufälligen Farbe instanziiert. Dies bedeutet natürlich, dass sich die Farben jedes Mal ändern, wenn die Komponente neu gerendert wird, was möglicherweise nicht das ist, was Sie wollen. Stattdessen könnten Sie so etwas tun:

var myColor = randomColor()
<View style={jewelStyle(myColor)} />

...

jewelStyle = function(myColor) {
   return {
     borderRadius: 10,
     background: myColor,
   }
 }

Ja, Sie können und sollten Sie tatsächlich verwenden StyleSheet.create, um Ihre Stile zu erstellen.

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';    

class Header extends Component {
    constructor(props){
        super(props);
    }    

    render() {
        const { title, style } = this.props;
        const { header, text } = defaultStyle;
        const combineStyles = StyleSheet.flatten([header, style]);    

        return (
            <View style={ combineStyles }>
                <Text style={ text }>
                    { title }
                </Text>
            </View>
        );
    }
}    

const defaultStyle = StyleSheet.create({
    header: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
        height: 60,
        paddingTop: 15,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 3 },
        shadowOpacity: 0.4,
        elevation: 2,
        position: 'relative'
    },
    text: {
        color: '#0d4220',
        fontSize: 16
    }
});    

export default Header;

Und dann:

<Header title="HOME" style={ {backgroundColor: '#10f1f0'} } />

Wenn Sie dennoch StyleSheet.createdynamische Stile nutzen möchten und diese auch haben möchten , probieren Sie Folgendes aus:

const Circle = ({initial}) => {


const initial = user.pending ? user.email[0] : user.firstName[0];

    const colorStyles = {
        backgroundColor: randomColor()
    };

    return (
        <View style={[styles.circle, colorStyles]}>
            <Text style={styles.text}>{initial.toUpperCase()}</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    circle: {
        height: 40,
        width: 40,
        borderRadius: 30,
        overflow: 'hidden'
    },
    text: {
        fontSize: 12,
        lineHeight: 40,
        color: '#fff',
        textAlign: 'center'
    }
});

Beachten Sie, wie die styleEigenschaft von Viewals Array festgelegt wird, das Ihr Stylesheet mit Ihren dynamischen Styles kombiniert.

Das einfachste ist meins:

<TextInput
  style={[
    styles.default,
    this.props.singleSourceOfTruth ?
    { backgroundColor: 'black' } 
    : { backgroundColor: 'white' }
]}/>

Hatte syntaktisch ein Problem. Das hat bei mir funktioniert

<Text style={[styles.textStyle,{color: 'red'}]}> Hello </Text>

const styles = StyleSheet.create({
   textStyle :{
      textAlign: 'center',   
      fontFamily: 'Arial',
      fontSize: 16
  }
  });

Du wirst so etwas wollen:

var RandomBgApp = React.createClass({
    render: function() {

        var getRandomColor = function() {
            var letters = '0123456789ABCDEF'.split('');
            var color = '#';
            for (var i = 0; i < 6; i++ ) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        };

        var rows = [
            { name: 'row 1'},
            { name: 'row 2'},
            { name: 'row 3'}
        ];

        var rowNodes = rows.map(function(row) {
            return <Text style={{backgroundColor:getRandomColor()}}>{row.name}</Text>
        });

        return (
            <View>
                {rowNodes}
            </View>
        );

    }
});

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 getRandomColorFunktion 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.

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:

this.state ={
   color: "#fff"
}

style={[
  styles.jewelstyle, {
  backgroundColor: this.state.BGcolor
}

Die zweite Option überschreibt alle ursprünglichen Hintergrundfarben, wie im Stylesheet angegeben. Dann haben Sie eine Funktion, die die Farbe ändert:

generateNewColor(){
  var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
  this.setState({BGcolor: randomColor})
}

Dies erzeugt eine zufällige Hex-Farbe. Rufen Sie dann einfach diese Funktion auf, wann immer und bam, neue Hintergrundfarbe.

Ich weiß, dass es mehrere Antworten gibt, aber ich denke, das Beste und Einfachste ist die Verwendung eines Status. "Ändern" ist der Statuszweck.

export default class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
          style: {
              backgroundColor: "white"
          }
      };
    }
    onPress = function() {
      this.setState({style: {backgroundColor: "red"}});
    }
    render() {
       return (
          ...
          <View style={this.state.style}></View>
          ...
       )
    }

}}

Sie können den Statuswert direkt an das Stilobjekt binden. Hier ist ein Beispiel:

class Timer extends Component{
 constructor(props){
 super(props);
 this.state = {timer: 0, color: '#FF0000'};
 setInterval(() => {
   this.setState({timer: this.state.timer + 1, color: this.state.timer % 2 == 0 ? '#FF0000' : '#0000FF'});
 }, 1000);
}

render(){
 return (
   <View>

    <Text>Timer:</Text>
    <Text style={{backgroundColor: this.state.color}}>{this.state.timer}</Text>
  </View>
 );
 }
}

Ja, Sie können dynamische Stile erstellen. Sie können Werte von Komponenten übergeben.

Erstellen Sie zuerst StyleSheetFactory.js

import { StyleSheet } from "react-native";
export default class StyleSheetFactory {
  static getSheet(backColor) {
    return StyleSheet.create({
      jewelStyle: {
        borderRadius: 10,
        backgroundColor: backColor,
        width: 20,
        height: 20,
      }
    })
  }
}

Verwenden Sie es dann wie folgt in Ihrer Komponente

import React from "react";
import { View } from "react-native";
import StyleSheetFactory from './StyleSheetFactory'
class Main extends React.Component {
  getRandomColor = () => {
    var letters = "0123456789ABCDEF";
    var color = "#";
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  };

  render() {
    return (
      <View>
        <View
          style={StyleSheetFactory.getSheet(this.getRandomColor()).jewelStyle}
        />
        <View
          style={StyleSheetFactory.getSheet(this.getRandomColor()).jewelStyle}
        />
        <View
          style={StyleSheetFactory.getSheet(this.getRandomColor()).jewelStyle}
        />
      </View>
    );
  }
}

Die Verwendung des Objektverbreitungsoperators "..." hat bei mir funktioniert:

<View style={{...jewelStyle, ...{'backgroundColor': getRandomColor()}}}></View>

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:

<TouchableOpacity style={this.props.venueFilters.includes('Bar')?styles.filterBtnActive:styles.filterBtn} onPress={()=>this.setFilter('Bar')}>
<Text numberOfLines={1}>
Bar
</Text>
</TouchableOpacity>

Auf welchem ​​eingestellten Filter befindet sich:

setVenueFilter(filter){
  var filters = this.props.venueFilters;
  filters.push(filter);
  console.log(filters.includes('Bar'), "Inclui Bar");
  this.setState(previousState => {
    return { updateFilter: !previousState.updateFilter };
  });
  this.props.setVenueFilter(filters);
}

PS: Die Funktion this.props.setVenueFilter(filters)ist eine Redux-Aktion und this.props.venueFiltersein Redux-Zustand.

Für den Fall, dass jemand Bedingungen anwenden muss

 selectedMenuUI = function(value) {
       if(value==this.state.selectedMenu){
           return {
                flexDirection: 'row',
                alignItems: 'center',
                paddingHorizontal: 20,
                paddingVertical: 10,
                backgroundColor: 'rgba(255,255,255,0.3)', 
                borderRadius: 5
           }  
       } 
       return {
            flexDirection: 'row',
            alignItems: 'center',
            paddingHorizontal: 20,
            paddingVertical: 10
       }
    }

Folgendes hat bei mir funktioniert:

render() {
  const { styleValue } = this.props;
  const dynamicStyleUpdatedFromProps = {
    height: styleValue,
    width: styleValue,
    borderRadius: styleValue,
  }

  return (
    <View style={{ ...styles.staticStyleCreatedFromStyleSheet, ...dynamicStyleUpdatedFromProps }} />
  );
}

Aus irgendeinem Grund war dies die einzige Möglichkeit, meine ordnungsgemäß zu aktualisieren.