Cum să utilizați operator binar, ternar în React Nativ?

Question 1

Eu sunt încercarea de a schimba culoarea de o componentă în funcție de tipul de pokemon, care este afișat. Am acest punct de vedere în interiorul unui părinte componentă care retrievs pokemon de la un api. La pokemonType variabilă este de api. Se înregistrează și nu se poate consola.log('pokemonType') care înregistrează tipul de pokemon e.g "iarbă". Se pare că operatorul ternar nu este înregistrarea pokemonType și merge direct la default. Am scris acest lucru greșit?

                {/* 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',
},

Multumesc mult

Question 2

Problema este că sunteți adăugarea de styles.pokemonTypeDefault de mai multe ori și, astfel, suprascrierea stilurilor.

Modul de a reacționa-nativ stiluri de lucru este că, atunci când treci o serie de stiluri, stiluri în partea dreaptă a suprascrie proprietăți stabilite pe elemente precedente, în exemplul tău, dacă pokemon tip este iarba stiluri matrice ar arata ceva de genul

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

Unul mai simplu și mai clar soluție ar fi crearea de o funcție pentru a obține dvs. de stiluri.

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

Problema este că sunteți adăugarea de styles.pokemonTypeDefault de mai multe ori și, astfel, suprascrierea stilurilor.

Modul de a reacționa-nativ stiluri de lucru este că, atunci când treci o serie de stiluri, stiluri în partea dreaptă a suprascrie proprietăți stabilite pe elemente precedente, în exemplul tău, dacă pokemon tip este iarba stiluri matrice ar arata ceva de genul

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

Unul mai simplu și mai clar soluție ar fi crearea de o funcție pentru a obține dvs. de stiluri.

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',
},

Cum să utilizați operator binar, ternar în React Nativ?

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie