Renderizando condicionalmente no React Native

Question

Eu sou muito novo para reagir nativo e codificação em geral. Eu preciso processar o texto com base em algumas variáveis ​​(veja abaixo).

se isPlayer === true && base.length === 1, renderizar x

else if isPlayer === true && base.length > 1, render y

senão renderizar z

Abaixo está o trecho de código no qual estou trabalhando e marquei onde preciso processar o texto. Tentei escrever uma função com a lógica if / else e, em seguida, chamar a função, mas não consegui fazer funcionar. Eu sei que com JSX você pode fazer renderização condicional embutida, mas também não consegui fazer isso funcionar. Toda e qualquer ajuda é apreciada! Desde já, obrigado!

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

Para uma lógica mais complexa, crie uma nova função:

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

Leia isto para mais informações.