Question

我遇到了ListView样式的问题。我的ListView有部分。所以我需要通过一些空白区域来分隔部分。我看到将marginBottom样式添加到每个部分的最后一个元素的决定。使用css，它将完成：last伪类。 React Native有一些替代方法吗？

一些伪代码例如：

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>
    }
}

Answer 1

您可以使用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>
    );
  }
};

您可以使用sectionId为您的部分执行相同的操作。我已经设置了一个示例here。

Answer 2

ListView公开了一个名为renderSeparator的函数，它在各个部分之间呈现一个视图/组件，用它来渲染你想要的分隔符。

您的另一个选择就是将marginTop值赋予您在renderSectionHeader中呈现的视图

将样式设置为ListView中的最后一个元素

2 个答案: