ReactNativeでの条件付きレンダリング

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/>;
}

詳細については、これをお読みください。