React Native 中的条件渲染

Question

I am pretty new to react native and coding in general. I need to render text based on some variables(see below).

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

else if isPlayer === true && base.length > 1 , render y

else render z

Below is the snippet of code I am working on and I have marked where I need to render the text. I have tried writing a function with if/else logic and then calling the function but have not got it to work. I know with JSX you can do conditional rendering inline but have not been able to get that to work either. Any and all help is appreciated! Thanks in advance!

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

For more complex logic create a new function:

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

Read this for further information.