React Native

[React Native] {} 표현식과 조건문

black-berry 2022. 12. 4. 22:27
728x90
반응형

짝수, 홀수 스타일 다르게 적용하기

<View>
  { 
    tip.map((content,i)=>{
      return i % 2 == 0 ? (<View style={styles.contContainerEven} key={i}>
        <Image style={styles.imageStyle2} source={{uri:content.image}}/>
        <View style={styles.contTextWrap}>
          <Text style={styles.contStyle1} numberOfLines={1}>{content.title}</Text>
          <Text style={styles.contStyle2} numberOfLines={3}>{content.desc}</Text>
          <Text style={styles.contStyle3}>[{content.idx}]{content.date}</Text>
        </View>
      </View>) : (<View style={styles.contContainerOdd} key={i}>
        <Image style={styles.imageStyle2} source={{uri:content.image}}/>
        <View style={styles.contTextWrap}>
          <Text style={styles.contStyle1} numberOfLines={1}>{content.title}</Text>
          <Text style={styles.contStyle2} numberOfLines={3}>{content.desc}</Text>
          <Text style={styles.contStyle3}>[{content.idx}]{content.date}</Text>
        </View>
      </View>)
    })
  }
</View>

 

Expo go 화면

728x90
반응형