React Native - CSS:没有边框的last-child？

Question

在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中,我们使用最后一个孩子)

Answer 1

您可以使用一些逻辑实现此目的:

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迭代器是否等于books数组length - 1.

Answer 2

您可以尝试支持以下的扩展样式表: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>
  );
});