-
[React Native] {} 표현식과 조건문React Native 2022. 12. 4. 22:27728x90반응형
짝수, 홀수 스타일 다르게 적용하기
<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반응형'React Native' 카테고리의 다른 글
[React Native] 기초 개념 정리 (0) 2022.12.08 [React Native] Text 말줄임 속성, ScrollView 가로 스크롤 (0) 2022.12.04