React Native-CSS：无边界的最后一个孩子？

小编典典

React Native-CSS：无边界的最后一个孩子？

reactjs

在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中，我们将使用上一个孩子）

阅读 379

2020-07-22

共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。

2020-07-22