React Native - CSS : 테두리 없는 마지막 자녀?

React Native - CSS : 테두리 없는 마지막 자녀?

React Native에는 다음과 같은 스택형 행에 매핑하여 출력하는 정적 배열의 책이 있습니다.

return books.map((book, i) => {
  return(
    <View style={styles.book} key={i}>
      <Text style={styles.book}>{book.title}</Text>
    </View>
  );
});

또한 각 책에는 아래 테두리가 있습니다.styles.book:

book: {
  borderBottomWidth: 1,
  borderBottomColor: '#000000'
}

목록의 마지막 책에 밑줄이 없어야 하니까 신청해야 해요.borderBottomWidth: 0내 생각엔?React Native에서 목록의 마지막 책에 맨 아래 테두리가 없도록 하려면 어떻게 해야 합니까?(일반적인 css에서는 last-child를 사용합니다)

이것은, 다음의 몇개의 논리를 사용해 실현할 수 있습니다.

return books.map((book, i) => {
  return(
    <View style={ (i === books.length - 1) ? styles.noBorderBook : styles.book} key={i}>
      <Text style={(i === books.length - 1) ? styles.noBorderBook : styles.book}>{book.title}</Text>
    </View>
  );
});

이것이 하는 것은, 다음의 어느쪽인가를 체크하는 것입니다.i, 반복기는 책 배열과 동일합니다.length - 1.

를 지원하는 확장 스타일시트를 사용할 수 있습니다.:last-child:

import EStyleSheet from 'react-native-extended-stylesheet';

const styles = EStyleSheet.create({
  book: {
    borderBottomWidth: 1,
    borderBottomColor: '#000000'
  },
  'book:last-child': {
    borderBottomWidth: 0
  }
});

return books.map((book, i) => {
  const style = EStyleSheet.child(styles, 'book', i, book.length);
  return(
    <View style={style} key={i}>
      <Text style={style}>{book.title}</Text>
    </View>
  );
});

언급URL : https://stackoverflow.com/questions/37245481/react-native-css-last-child-without-a-border