1
votes

Comment définir une variable qui peut être utilisée avec style

Je fais réagir des composants natifs qui, selon son accessoire, utilisent deux couleurs principales. Puisque je veux accéder à cette variable dans la feuille de style, je la déclare en dehors de la classe, et non dans l'état. Je le déclare d'abord bleu, puis dans le constructeur, je change sa valeur en vert. Cependant le texte qu'il utilise reste bleu. Je sais que cela a quelque chose à voir avec le rendu, mais je pensais que puisque je modifiais la valeur dans le constructeur de classe, qui est le premier du cycle de vie, cela fonctionnerait. , y a-t-il donc une solution à cela?

let mainColor = Colors.blue1;

export default class Article extends Component {

    constructor(props) {
        super(props);
        mainColor = Colors.green;
        this.state={
            liked: false,
            withHeroImage: false
        }
    }


    render() {
        return (

           <Text style={styles.title}>Lorem ipsum</Text>
        );
    }
}

const styles = StyleSheet.create({
    title:{
        fontSize: 20,
        color: mainColor,
        fontFamily: FontFamily.PoppinsSemibold,
        marginBottom: 20
    }
})

java react-native

0 commentaires

3 Réponses :

1
votes

 let mainColor = Colors.blue1;

export default class Article extends Component {

  constructor(props) {
    super(props);
    this.state={
        liked: false,
        withHeroImage: false,
        mainColor = Colors.green;
    }
}

render() {
    return (

       <Text style={[styles.title, color: this.state.mainColor]}>Lorem ipsum</Text>
    );
}}

  const styles = StyleSheet.create({
title:{
    fontSize: 20,
    fontFamily: FontFamily.PoppinsSemibold,
    marginBottom: 20
}
})
Try this way. just updating the variable doesnt make any changes. to makes in the rendering part the changes should be done in setState or props. so if you want to update color then take the color in setState and assign it to styles as done above. Hope it helps !!!!

0 commentaires

3
votes

Je ne pense pas que vous puissiez modifier la feuille de style après sa création et la raison pour laquelle vous essayez de le faire n'est pas claire.

Dans votre exemple, vous pouvez simplement ajouter un attribut dynamique à la balise Text , comme dans:

<Text style={[styles.title, {color:mainColor}]}>Lorem ipsum</Text>

0 commentaires

1
votes

Si votre version de React est 16.8 ou supérieure, vous pouvez utiliser l'effet hook .

un lien qui me permet d'exécuter directement ma réponse

Utilisation

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet,Button } from 'react-native';


export default function Article() {
  const [maincol, setColor] = useState("blue");

  const styles = StyleSheet.create({
    title:{
        fontSize: 20,
        color: maincol,
        marginBottom: 20
    }
})

  useEffect(() => {
    console.log(maincol);
  });

        return (
          <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
           <Button title="change color" onPress={() => setColor("green")} />
           <Text style={styles.title}>Lorem ipsum</Text>
           </View>
        );
}

0 commentaires