2
votes

Réagir l'état d'accès natif à partir de StyleSheet

J'essaie de définir l'arrière-plan d'un conteneur en fonction de l'état, mais il continue de me montrer une erreur bg n'est pas défini

constructor(props) {
    super(props)
    this.state = {
        bg:'#fff'
    }
}

render(){
    return(<View style={styles.container} />)
} 

const styles = StyleSheet.create({
    container:{
        flex: 1,
        backgroundColor: this.state.bg,
    }
})

react-native

0 commentaires

3 Réponses :

0
votes

Vous ne pouvez pas vraiment, mais ce que vous pouvez faire est de l'utiliser dans le style du conteneur comme ceci:

  constructor(props) {
    super(props)
    this.state = {
     bg:'#fff'
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1
    }})
render(){
  return <View style={[styles.container, backgroundColor: this.state.bg]}/>
}

2 commentaires

donc seul le style Inline fonctionnera dans ce cas, merci

votre code a une erreur, je ne pense pas que nous pouvons utiliser le crochet dans le style?

0
votes

S'il vous plaît voir mon commentaire ci-dessous et l'utiliser comme ça

entrez la description de l'image ici

4 commentaires

cela ferait-il une différence si j'utilise uniquement un style en ligne?

cela ne fera aucune différence .. cela fonctionnera de la même manière que la création de styles.

En fait, cela fonctionne avec le style en ligne, ma question était de savoir si cela ne faisait aucune différence en termes de performances, car la feuille de style est meilleure que le style en ligne pour les performances, mais je n'ai jamais essayé d'utiliser la fonction de rendu comme code ci-dessus

Vous avez raison de dire qu'il a des problèmes de performances car chaque fois que la fonction de rendu est appelée, elle doit créer un style. Mais généralement, pour un code aussi petit, il n'y a pas de problèmes de performances. Vous pouvez donc l'utiliser comme ça.

6
votes

Modifiez ce code:

return <View style={[styles.container, {backgroundColor: this.state.bg}]}/>

pour ce code:

return <View style={[styles.container, backgroundColor: this.state.bg]}/>

1 commentaires

Vous pouvez également déstructurer l'état et utiliser uniquement backgroundColor: bg