私はこれに似たカードリスト実装しました

Question

セクションヘッダとネイティブグリッドレイアウトに反応：doesnのスタイルで

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

と

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

を使用しているかのようhttps://github.com/yelled3/react-native-grid-exampleを、しかし、それはそうですセクションヘッダーを適切にレンダリングできるようにし、リストビューのレイアウトを大幅に変更します。私はセクションラップなしセクションヘッダでの作業それを得たが、行ごとに一枚のカードを持つことはオプションではありませんしている

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

次のように

セクションヘッダがレンダリングされます。

Answer 1

ここでは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