Rendering Bersyarat di React Native

Question

Saya cukup baru untuk bereaksi native dan coding secara umum. Saya perlu membuat teks berdasarkan beberapa variabel (lihat di bawah).

jika isPlayer === true && base.length === 1, render x

lain jika isPlayer === true && base.length > 1, render y

lain membuat z

Di bawah ini adalah potongan kode yang saya kerjakan dan saya telah menandai di mana saya perlu merender teks. Saya telah mencoba menulis fungsi dengan logika if / else dan kemudian memanggil fungsi tersebut tetapi belum berhasil. Saya tahu dengan BEJ Anda dapat melakukan rendering bersyarat secara inline tetapi belum juga dapat membuatnya berfungsi. Setiap dan semua bantuan sangat dihargai! Terima kasih sebelumnya!

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

Untuk logika yang lebih kompleks, buat fungsi baru:

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

Baca ini untuk informasi lebih lanjut.