네이티브 SectionList 레이아웃에 일치하십시오.

Question

다른 섹션 헤더로 여러 섹션을 렌더링하는 데 사용하고 있습니다. 내가 원하는 방식으로 표시하는 데 어려움을 겪고 있습니다. 상단과 하단에 표 머리글을 그리드로 표시하고 싶습니다. 이 코드

This is what I have right now

:

<SectionList 
     contentContainerStyle={styles.sectionListContainer} 
     renderItem={this.renderItem} 
     keyExtractor={this.getKey} 
     renderSectionHeader={this.renderSectionHeader} 
     shouldItemUpdate={this.shouldItemUpdate} 
     sections={[ 
      { data: mostViewedArray, key: "most_viewed", title: "Most viewed" }, 
      { data: recentlyArray, key: "recently", title: "Recently" } 
     ]} 
     /> 



const styles = StyleSheet.create({ 
    sectionListContainer: { 
    flex: 1, 
    flexDirection: "row", 
    flexWrap: "wrap", 
    justifyContent: "space-between" 
    } 
}); 

그래서 나는 sectionHeader에 sectionListContainer의 CSS를 적용 할 수 있도록하고 싶습니다. 그러나 나는 그것이 가능하다는 것을 확신하지 못합니다.

누구든지 그것에 대해 알고 있다면 알려주세요!

감사합니다!

Answer 1

우리에게 도움이되는 해결책은 renderSectionHeader가 전체 컨테이너의 너비를 갖도록 강제적으로함으로써 렌더링 항목을 다음 행으로 강제 적용하는 것입니다.

renderSectionHeader의 내용을 포함하도록 질문을 업데이트하면 (이미 NiFi가 요청한대로) renderSectionHeader를 업데이트하는 방법에 대한보다 자세한 대답을 제공 할 수 있습니다.