Bedingtes Rendern in React Native

Question

Ich bin ziemlich neu, um auf native und Codierung im Allgemeinen zu reagieren. Ich muss Text basierend auf einigen Variablen rendern (siehe unten).

Wenn isPlayer === true && base.length === 1, x rendern

sonst wenn isPlayer === true && base.length > 1, rendern Sie y

sonst rendern z

Unten ist der Codeausschnitt, an dem ich arbeite, und ich habe markiert, wo ich den Text rendern muss. Ich habe versucht, eine Funktion mit if / else-Logik zu schreiben und dann die Funktion aufzurufen, habe sie aber nicht zum Laufen gebracht. Ich weiß, dass Sie mit JSX bedingtes Inline-Rendering durchführen können, aber auch nicht, dass dies funktioniert. Jede Hilfe wird geschätzt! Danke im Voraus!

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

Für eine komplexere Logik erstellen Sie eine neue Funktion:

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

Lesen Sie dies für weitere Informationen.