將樣式設置爲ListView中的最後一個元素，部分爲

我有ListView樣式的問題。我的ListView有部分。所以我需要通過一些空白區域來分隔各個部分。我看到添加marginBottom樣式到每個部分的最後一個元素的決定。用css可以完成：最後一個僞類。 React Native有一些替代方案來做到這一點？將樣式設置爲ListView中的最後一個元素，部分爲

例如一些僞代碼：

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

來源

2016-02-29 Konstantin Yakushin

您可以在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。

來源

2016-02-29 09:21:09

問題渲染的觀點是，我不知道行的確切數字。不過謝謝你！ –

另外，因爲我使用ListView的部分，rowId不是索引，但對象的關鍵。 –

您可以顯示您的代碼示例。所以我可以看看是否可以做到？ –

ListView公開了一個名爲renderSeparator的函數，它在段之間呈現一個視圖/組件，用它來渲染你想要的分隔符。

你的另一種選擇是隻是爲了給marginTop價值，你在renderSectionHeader

來源

2016-02-29 12:00:14

是的，我試過使用renderSeparator屬性。這是來自React Native文檔的報價： **如果提供了可呈現組件，它將在每行下方呈現爲分隔符，但如果存在以下區段標頭，則不會顯示爲最後一行** 這讓我覺得它是不是那種可以幫助我的東西。你能證明使用的樣本嗎？ –

將樣式設置爲ListView中的最後一個元素，部分爲

回答

相關問題