React native 将样式设置为具有节的ListView中的最后一个元素

我对ListView样式有问题。我的ListView有多个部分。所以我需要用一些空的空间来分隔部分。我看到了在每个部分的最后一个元素中添加marginBottom样式的决定。使用css，它将通过：last pseudo类完成。有没有其他方法可以做到这一点

一些伪代码，例如：

var dataSource =  new React.ListView.DataSource({
    rowHasChanged: (a, b) => a !== b,
    sectionHeaderHasChanged: (a, b) => a !== b,
    getRowData: (dataBlob, sectionId, rowId) => dataBlob[rowId],
    getSectionHeaderData: (dataBlob, sectionId, rowId) => dataBlob[sectionId]
});

//test data
var sectionIds = ["clients", "properties"];
var rowIds = [["clients_1", "clients_2"], ["properties_1"]];
var dataBlob = {
    clients_1: {
        type: "client",
        title: "Andrew Chinn",
        addInfo: "xxx xxx xxx",
        image: ""
    },
    clients_2: {
        type: "client",
        title: "Karl Chinn",
        addInfo: "xxx xxx xxx",
        image: ""
    },
    properties_1: {
        type: "property",
        title: "Karl Chinn",
        addInfo: "xxx xxx xxx",
        image: ""       
    }
};


const renderSectionHeader = (data) => {
    return (
        <SomeTestHeader {...data}/>
    );
};

const renderRow = (data) => {
    return (
        <SomeTestComponent {...data}/>
    );
};

var Test extends React.Component {
    render() {
        <View>
            <ListView
                dataSource={dataSource.cloneWitRowsAndSections(dataBlob, sectionIds, rowIds)}
                renderRow={renderRow}
                renderSectionHeader={renderSectionHeader}
            />
        </View>
    }
}

var dataSource=new React.ListView.dataSource({
行已更改：（a，b）=>a！==b，
科长变更：（a，b）=>a！==b，
getRowData:（dataBlob，sectionId，rowId）=>dataBlob[rowId]，
getSectionHeaderData:（dataBlob，sectionId，rowId）=>dataBlob[sectionId]
});
//测试数据
var sectionIds=[“客户端”，“属性”]；
var rowIds=[“客户机1”、“客户机2”]、[“属性1”]；
var-dataBlob={
客户1：{
类型：“客户端”，
标题:"郑家富",，
附加信息：“xxx xxx xxx”，
图像：“
},
客户2：{
类型：“客户端”，
标题：“卡尔·钦恩”，
附加信息：“xxx xxx xxx”，
图像：“
},
物业(1):{
类型：“属性”，
标题：“卡尔·钦恩”，
附加信息：“xxx xxx xxx”，
图像：“
}
};
const renderSectionHeader=（数据）=>{
返回(
);
};
常量renderRow=（数据）=>{
返回(
);
};
var测试扩展了React.Component{
render（）{
}
}

您可以在

renderRow

方法中执行此操作：

renderRow = (rowData, sectionId, rowId) => {
  var indexSection = _.findIndex(this.state.sectionIds, function(o) {return o === sectionId});
  if (rowId == _.last(this.state.rowIds[indexSection])) {
    return (
      <View style={{backgroundColor: 'red'}}>
        <Text>{rowId}</Text>
      </View>
    );
  } else {
    return (
      <View style={{backgroundColor: 'blue'}}>
        <Text>{rowId}</Text>
      </View>
    );
  }
};

renderRow=（行数据，节ID，行ID）=>{
var indexSection=uu.findIndex（this.state.sectionIds，函数（o）{return o==sectionId}）；
if（rowId==389;.last（this.state.rowIds[indexSection]））{
返回(
{rowId}
);
}否则{
返回(
{rowId}
);
}
};

---

您可以对具有sectionId的分区执行相同的操作。我已经设置了一个示例。

ListView公开了一个名为renderSeparator的函数，该函数在节之间呈现视图/组件，使用它来呈现所需的分隔符

---

您的另一个选项只是为您在renderSectionHeader中渲染的视图赋予marginTop值，问题是我不知道确切的行数。不过还是要谢谢你！另外，因为我在节中使用ListView，所以rowId不是索引，而是对象的键。您能展示一下您的代码示例吗。所以我可以看看是否可以做到？我已经更新了我的答案，告诉我它是否有效。这是一个解决办法，因为我看不到任何实现的解决方案。链接也被更新了。是的，我试着使用renderSeparator属性。这是React本机文档中的一段话：如果提供了可呈现组件，则该组件将呈现为每行下面的分隔符，但如果下面有节标题，则不会呈现为最后一行。这让我觉得这不是能帮助我的事情。你能示范一下使用方法吗？