陣營本地網格佈局與節頭

我實現了一個類似的卡列表：https://github.com/yelled3/react-native-grid-example，但是，它好像使用陣營本地網格佈局與節頭

list: { 
    justifyContent: "center", 
    flexDirection: "row", 
    flexWrap: "wrap", 
}

在沒有按樣式

和

section: { 
    flex: 1, 
    flexDirection: "row", 
    backgroundColor: "#FFFFFF", 
    marginBottom: 10, 
    justifyContent: "center", 
}

」 •允許部分頭部正確呈現，並且他們會顯着改變列表視圖的佈局。

區段頭部呈現如下：

<View style={styles.section}> 
    <Text style={styles.sectionHeaderText}>----{sectionId}----</Text> 
</View>

我得到它與節頭的工作，而不部分包起來，但每行有一個卡是不是一種選擇。

來源

2016-06-23 omriki

與RN 0.35一樣，節頭與列表元素內聯呈現，沒有分割成節。見附圖圖像

列表代碼：

 <ListView 
     style={{ 
     flex: 1, 
     alignSelf: 'stretch', 
     margin: 10, 
     marginBottom: 10, 
     borderRadius: 6, 
     }} 
     dataSource={this.state.symbolsDataSource} 
     renderRow={this.renderRow} 
     contentContainerStyle={{ 
     alignItems: 'flex-start', 
     flexDirection: 'row', 
     flexWrap: 'wrap', 
     overflow: 'hidden' 
     }} 
     enableEmptySections 
     removeClippedSubviews 
     showVerticalScrollIndicator 
     keyboardDismissMode='on-drag' 
     keyboardShouldPersistTaps 
     renderFooter={() => <View style={{ height: 240 }}/>} 
     initialListSize={30} 
     renderSectionHeader={(sectionData, sectionID) => 
     <View style={{ justifyContent: 'center', backgroundColor: 'white'}}> 
      <Text style={{ alignSelf: 'center',fontSize: fixFont(20), color: Colors.darkBlue }}>{sectionID}</Text> 
     </View> 
     } 
     scrollRenderAheadDistance={400/*pixels*/} 
     pageSize={4/*how many items to render each loop*/} 

    />

screenshot

來源

2017-03-09 11:08:22

陣營本地網格佈局與節頭

回答

相關問題