React-native CSS 'last-child' 属性答案

【问题标题】：React-native CSS 'last-child' propertyReact-native CSS 'last-child' 属性
【发布时间】：2025-12-18 06:55:02
【问题描述】：

这是我的代码：

<ListView style={styles.mainContent}
    ref={(scrollView) => { _scrollView = scrollView; }}
    dataSource={this.state.dataSource}
    renderRow={this.renderRow.bind(this)}
/>

以及该代码的样式：

mainContent: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    borderBottomColor: '#CCCCCC',
    paddingLeft: 15,
    paddingRight: 15
},

现在，每个“ListView”都有一个边框，在最后一部分，我希望删除或覆盖该边框。但是在 react-native 中，不可能使用 :last-child。

我已经尝试使用here 给出的答案，但我无法得到结果。（我还是 React(-native) 的新手）

有人有想法吗？

【问题讨论】：

您尝试过 ESS：github.com/vitalets/… 吗？
是的，这正是我包含的链接。
对不起，我附上链接，我猜这是您在包含的链接上的解决方案。如果这对你不起作用，我不知道如何帮助你。

标签： css react-native css-selectors

【解决方案1】：

不要使用 ListView，而是尝试使用 ScrollView 并像下面的示例那样遍历要显示的元素（假设变量 DataSource 是要呈现的值数组）

render() {
  const innerElems = DataSource.map((e, i) => {
    if (i === DataSource.length - 1) {
      // check if it's last elem, if so the no border style that you want
      return <View style={styles.noBottomBorder}> ... </View>
    } 
    return <View style={styles.withBottomBorder}> ... </View>
  });
  return (
    <ScrollView style={styles.mainContent}>
      {innerElems}
    </ScrollView>
  );
}

【讨论】：

【解决方案2】：

您可以使用ListView 执行此操作，例如将renderRow 的长度传递给renderRow 属性并在您传递的函数中检查它，例如：

const lastRow = DataSource.length - 1;

...

renderRow={this.renderRow.bind(this, lastRow)}

然后在renderRow就可以得到当前行的ID，比如：

renderRow(rowData, sectionID, rowID, lastRow) {
 // the rowID is what you are looking for, so check if it is the last one, and do some styling to remove the unwanted border
}

【讨论】：