ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [React Native] {} 표현식과 조건문
    React Native 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
    반응형

    댓글

Designed by Tistory.