Comment vérifier l'état d'une vue dans React Native?

Question

J'essaye de mettre à jour le backgroundColor d'une vue sur une pression de bouton. Si la couleur est rouge alors je veux qu'il change en orange et vice versa.

J'ai actuellement le bouton qui change la vue du rouge à l'orange, mais pas l'inverse.

constructor(props) { 
    super(props); 
    this.state = { 
     viewColour: "red", 
    } 
} 

render() { 
    return (
     <View style={styles.parentView}> 
      <Button 
       title="Press here" 
       onPress={() => this.setState({viewColour:"orange"})} 
      /> 

      <View style={Object.assign({}, styles.colourSquare, {backgroundColor: this.state.viewColour})}/> 
     </View> 
    ); 
} 

Comment puis-je vérifier ce que la couleur actuelle de la vue est afin de déterminer la couleur à changer pour en appuyant sur le bouton?

Answer 1

vous devriez faire

render() { 
return (
    <View style={styles.parentView}> 
     <Button 
      title="Press here" 
      onPress={() => this.setState({viewColour: this.state.viewColour == 'red' ? "orange" : 'red'})} 
     /> 

     <View style={[styles.colourSquare, {backgroundColor: this.state.viewColour}]}/> 
    </View> 
); 
} 

Answer 2

Alors que la méthode de Mohammed est valable Facebook recommande maintenant passer à une fonction setstate au lieu d'un objet lorsque le nouvel état dépend de l'ancien état (according to the docs). Par conséquent, vous devriez faire this.setState((prevState) => ({viewColour: prevState.viewColour == 'red' ? "orange" : 'red'}))