Comment utiliser ternar opérateur à Réagir Natif?

Question 1

Je suis en train de changer la couleur d'un composant en fonction du type de pokemon qui est affichée. J'ai ce point de vue à l'intérieur d'un composant parent qui retrievs pokemon à partir d'une api. Le pokemonType variable est à partir de l'api. Il enregistre et je peux console.log ("pokemonType') qui enregistre le type de pokemon e.g 'herbe'. Il semble que l'opérateur ternaire n'est pas de l'inscription de l'pokemonType et aller directement à défaut. Suis-je écrire à ce mal?

                {/* Pokemon Type */}
            <View style={[
                (pokemonType === 'grass') ? styles.grass : styles.pokemonTypeDefault,
                (pokemonType === 'fire') ? styles.fire : styles.pokemonTypeDefault,
                (pokemonType === 'water') ? styles.water : styles.pokemonTypeDefault,
                (pokemonType === 'bug') ? styles.bug : styles.pokemonTypeDefault,
                (pokemonType === 'ghost') ? styles.ghost : styles.pokemonTypeDefault,
                (pokemonType === 'rock') ? styles.rock : styles.pokemonTypeDefault,
                (pokemonType === 'steel') ? styles.steel : styles.pokemonTypeDefault,
                (pokemonType === 'electric') ? styles.electric : styles.pokemonTypeDefault,
            ]}>
                <Text style={styles.pokemonTypeText}>{pokemonType.toUpperCase()}</Text>
            </View>

 const styles = StyleSheet.create({
 
    grass: {
    backgroundColor: '#00FF00',
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
},
    fire: {
    backgroundColor: '#FFA500',
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
},
   
 }) ..//All the other type styles

  pokemonTypeDefault: {
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
    backgroundColor: 'blue',
},

Merci beaucoup

Question 2

Le problème, c'est que vous êtes en train d'ajouter styles.pokemonTypeDefault plusieurs fois et donc d'écraser vos styles.

La façon de réagir indigènes les styles de travail, c'est que lorsque vous passez un éventail de styles, les styles de droite écraser jeu de propriétés sur les éléments précédents, dans votre exemple, si le pokemon est de type herbe vos styles de tableau devrait ressembler à quelque chose comme

[styles.grass, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault]

Un plus simple et plus clair, la solution serait de créer une fonction pour obtenir vos styles.

E. g.

                {/* Pokemon Type */}
            <View style={getPokemonTypeStyle(pokemonType)}>
                <Text style={styles.pokemonTypeText}>{pokemonType.toUpperCase()}</Text>
            </View>

const getPokemonTypeStyle = (pokemonType) => {
 switch (pokemonType) {
    case 'grass':
      return styles.grass
    case 'fire':
      return styles.fire
    case 'water':
      return styles.water
    case 'bug':
      return styles.bug
    case 'ghost':
      return styles.ghost
    case 'rock':
      return styles.rock
    case 'steel':
      return styles.steel
    case 'electric':
      return styles.electric
    default:
      return styles.pokemonTypeDefault 
}

 const styles = StyleSheet.create({
 
    grass: {
    backgroundColor: '#00FF00',
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
},
    fire: {
    backgroundColor: '#FFA500',
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
},
   
 }) ..//All the other type styles

  pokemonTypeDefault: {
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
    backgroundColor: 'blue',
},

Gabriel Donadel Dall'Agnol · Answer 1 · 2021-11-23T23:12:50

Le problème, c'est que vous êtes en train d'ajouter styles.pokemonTypeDefault plusieurs fois et donc d'écraser vos styles.

La façon de réagir indigènes les styles de travail, c'est que lorsque vous passez un éventail de styles, les styles de droite écraser jeu de propriétés sur les éléments précédents, dans votre exemple, si le pokemon est de type herbe vos styles de tableau devrait ressembler à quelque chose comme

[styles.grass, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault]

Un plus simple et plus clair, la solution serait de créer une fonction pour obtenir vos styles.

E. g.

                {/* Pokemon Type */}
            <View style={getPokemonTypeStyle(pokemonType)}>
                <Text style={styles.pokemonTypeText}>{pokemonType.toUpperCase()}</Text>
            </View>

const getPokemonTypeStyle = (pokemonType) => {
 switch (pokemonType) {
    case 'grass':
      return styles.grass
    case 'fire':
      return styles.fire
    case 'water':
      return styles.water
    case 'bug':
      return styles.bug
    case 'ghost':
      return styles.ghost
    case 'rock':
      return styles.rock
    case 'steel':
      return styles.steel
    case 'electric':
      return styles.electric
    default:
      return styles.pokemonTypeDefault 
}

 const styles = StyleSheet.create({
 
    grass: {
    backgroundColor: '#00FF00',
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
},
    fire: {
    backgroundColor: '#FFA500',
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
},
   
 }) ..//All the other type styles

  pokemonTypeDefault: {
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
    backgroundColor: 'blue',
},

Comment utiliser ternar opérateur à Réagir Natif?

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie