Rendu conditionnel dans React Native

Question

Je suis assez nouveau pour réagir natif et codage en général. J'ai besoin de rendre le texte basé sur certaines variables (voir ci-dessous).

si isPlayer === true && base.length === 1, rendre x

sinon si isPlayer === true && base.length > 1, rendre y

sinon rendre z

Vous trouverez ci-dessous l'extrait de code sur lequel je travaille et j'ai marqué où je dois rendre le texte. J'ai essayé d'écrire une fonction avec la logique if / else, puis d'appeler la fonction mais je ne l'ai pas fait fonctionner. Je sais qu'avec JSX, vous pouvez effectuer un rendu conditionnel en ligne, mais je n'ai pas pu le faire fonctionner non plus. Toute aide est appréciée! Merci d'avance!

<View style={{ marginTop: marginTopAdj, flexDirection: 'row' }}>
          <TouchableOpacity onPress={() => navigation.goBack()} style={{}}>
            {IconWhiteBackButton}
          </TouchableOpacity>

          <HeaderTitle
            containerStyle={styles.headerTitleContainer}
            textStyle={{ color: '#fff' }}
          >
            {Item to be conditionally rendered}
          </HeaderTitle>
</View>

Answer 1

<View style={{ marginTop: marginTopAdj, flexDirection: 'row' }}>
          <TouchableOpacity onPress={() => navigation.goBack()} style={{}}>
            {IconWhiteBackButton}
          </TouchableOpacity>

          <HeaderTitle
            containerStyle={styles.headerTitleContainer}
            textStyle={{ color: '#fff' }}
          >
            {isPlayer === true && base.length === 1 && <ItemX/>}
            {isPlayer === true && base.length > 1 && <ItemY/>}
          </HeaderTitle>
</View>

Pour une logique plus complexe, créez une nouvelle fonction:

renderItemConditionally = () => {
  if (...) return <ItemX/>;
  else if (...) return <ItemY/>;
  else return <ItemZ/>;
}

Lisez ceci pour plus d'informations.