web-dev-qa-db-fra.com

React La couleur du texte natif ne fonctionne pas

J'ai un composant Text à l'intérieur d'un TouchableOpacity dont je veux changer la couleur en fonction d'un var.

Voici mon code:

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

var flag = false;

export default class MyTest extends Component {
  changeColor() {
    flag = true;
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={{ flex: 1, backgroundColor: "#888888", margin: 20 }}
          onPress={this.changeColor.bind(this)}
        >
          <Text style={[{ color: "blue" }, flag ? { color: "red" } : false]}>
            One
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#F5FCFF"
  }
});

J'ai essayé d'utiliser this.state.textColor mais aucun résultat. J'ai également essayé de l'utiliser dans la variable des styles, mais encore une fois, ne fonctionnait pas.

Une idée?

javascriptandroidreactjsreact-native
6
MohamadKh75

La variable flag n'est pas dans l'état de votre composant, donc le composant ne sera pas rendu à nouveau lorsqu'il changera.

Mettez-le à la place de votre composant et basculez-le avec setState et cela fonctionnera.

class MyTest extends Component {
  state = { flag: true };

  changeColor = () => {
    this.setState(previousState => {
      return { flag: !previousState.flag };
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={{ flex: 1, backgroundColor: "#888888", margin: 20 }}
          onPress={this.changeColor}
        >
          <Text style={{ color: this.state.flag ? "red" : "blue" }}>One</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
2
Tholle