Условный рендеринг в React Native

Question

Я новичок в том, чтобы реагировать на нативный код и кодирование в целом. Мне нужно отобразить текст на основе некоторых переменных (см. Ниже).

если isPlayer === true && base.length === 1, визуализировать x

иначе, если isPlayer === true && base.length > 1визуализировать y

иначе визуализировать z

Ниже приведен фрагмент кода, над которым я работаю, и я отметил, где мне нужно отобразить текст. Я попытался написать функцию с логикой if / else, а затем вызвать функцию, но у меня нет ее для работы. Я знаю, что с JSX вы можете выполнять условный рендеринг в реальном времени, но мне тоже не удалось заставить это работать. Любая помощь приветствуется! Заранее спасибо!

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

Для более сложной логики создайте новую функцию:

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

Прочтите это для получения дополнительной информации.