Warunkowe renderowanie w React Native

Question

Jestem całkiem nowy, jeśli chodzi o reagowanie na język natywny i ogólnie na kodowanie. Potrzebuję renderować tekst na podstawie niektórych zmiennych (patrz poniżej).

jeśli isPlayer === true && base.length === 1renderuj x

w przeciwnym razie isPlayer === true && base.length > 1renderuj y

else render z

Poniżej znajduje się fragment kodu, nad którym pracuję i zaznaczyłem, gdzie muszę wyrenderować tekst. Próbowałem napisać funkcję z logiką if / else, a następnie wywołać tę funkcję, ale nie udało mi się jej zadziałać. Wiem, że dzięki JSX możesz wykonywać renderowanie warunkowe w tekście, ale też nie udało Ci się go uruchomić. Będziemy wdzięczni za każdą pomoc! Z góry dziękuję!

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

Dla bardziej złożonej logiki utwórz nową funkcję:

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

Przeczytaj to, aby uzyskać dalsze informacje.