Question

这是我的代码：

<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'都有一个边框，在最后一节，我希望删除或覆盖该边框。但在反应原生中，不可能使用：last-child。

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

有人有想法吗？

Answer 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>
  );
}

Answer 2

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

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
}

React-native CSS'last-child'属性

2 个答案: