Rendering condizionale in React Native

Question

Sono abbastanza nuovo per reagire al nativo e al codice in generale. Ho bisogno di rendere il testo in base ad alcune variabili (vedi sotto).

if isPlayer === true && base.length === 1, renderizza x

altrimenti se isPlayer === true && base.length > 1, render y

altrimenti rendere z

Di seguito è riportato lo snippet di codice su cui sto lavorando e ho contrassegnato dove devo rendere il testo. Ho provato a scrivere una funzione con la logica if / else e quindi a chiamare la funzione ma non l'ho fatta funzionare. So che con JSX puoi eseguire il rendering condizionale in linea ma non sono stato in grado di farlo funzionare. Qualsiasi aiuto è apprezzato! Grazie in anticipo!

<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>

Per una logica più complessa creare una nuova funzione:

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

Leggi questo per ulteriori informazioni.