Jak korzystać z тернарный operator w React Native?

Question 1

Próbuję zmienić kolor składnika w zależności od rodzaju wyświetlanego pokemon. Mam ten widok wewnątrz rodzica, który pobiera pokemon z api. Zmienna pokemonType pochodzi z api. On jest rejestrowany i mogę console.log ("Typu pokemon"), który rejestruje typu pokemon, na przykład "trawa". Wygląda na to, że тернарный operator nie rejestruje typu pokemon i przechodzi bezpośrednio do domyślnego. Piszę to źle?

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

Wielkie dzięki

Question 2

Problem w tym, że dodajesz styles.pokemonTypeDefault kilka razy i w ten sposób перезаписываете swoje style.

Sposób pracy stylów react-native polega na tym, że podczas biegu tablicy stylów style w prawej części zastąpią właściwości, które zostały określone dla poprzednich elementów, w twoim przykładzie, jeśli typ pokemon-trawa, twój tablicę stylów będzie wyglądać mniej więcej tak

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

Jednym z bardziej prostych i jasnych rozwiązań byłoby stworzenie funkcji, aby uzyskać twoich stylów.

Np.

                {/* 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

Problem w tym, że dodajesz styles.pokemonTypeDefault kilka razy i w ten sposób перезаписываете swoje style.

Sposób pracy stylów react-native polega na tym, że podczas biegu tablicy stylów style w prawej części zastąpią właściwości, które zostały określone dla poprzednich elementów, w twoim przykładzie, jeśli typ pokemon-trawa, twój tablicę stylów będzie wyglądać mniej więcej tak

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

Jednym z bardziej prostych i jasnych rozwiązań byłoby stworzenie funkcji, aby uzyskać twoich stylów.

Np.

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

Jak korzystać z тернарный operator w React Native?

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii