React Native Flat List의 List Header Component를 스틱으로 만들려면 어떻게 해야 합니까?

React Native Flat List의 List Header Component를 스틱으로 만들려면 어떻게 해야 합니까?

일부러 화면 폭보다 넓은 Flat List를 가지고 있습니다.

목록은 각 행을 보려면 수직으로 스크롤하고 화면 밖의 항목에 액세스하려면 수평 ScrollView에 위치합니다.

ListHeaderComponent 소품은 기본적으로 스프레드시트와 같이 "frozen header"로 동작하고 싶은 x축 라벨입니다.

List Header Component 스틱화 방법

프로펠러를 설정할 필요가 있습니다.Flatlist~하듯이stickyHeaderIndices={[0]}

List Header Component:이 프로포트는 헤더 뷰를FlatList.

stickyHeaderIndices={[0]:이 소품이라면FlatList0 인덱스 위치 아이템을 스틱헤더로서 이미 추가했습니다.FlatList따라서 헤더는 0 인덱스 위치에 있으므로 기본적으로는 헤더를 스틱으로 만듭니다.

<FlatList
  data={ this.state.FlatListItems }
  ItemSeparatorComponent={ this.FlatListItemSeparator}
  renderItem={ ({item}) => (
    <Text
      style={styles.FlatList_Item}
      onPress={this.GetItem.bind(this, item.key)}> {item.key}
      </Text>
  )}
  ListHeaderComponent={this.Render_FlatList_Sticky_header}
  stickyHeaderIndices={[0]}
/>

stickyHeaderIndices={[0]}당신의 문제를 해결할 수 있어요.

 <FlatList
        data={this.state.data}
        renderItem={this.renderItem}
        keyExtractor={item => item.id}
        stickyHeaderIndices={[0]}
      />

게다가.stickyHeaderIndices붙이고 싶은 인덱스의 배열이 될 수도 있습니다.다음과 같은 많은 인덱스를 설정할 수도 있습니다.FlatList 스틱헤더의 예시

 <FlatList
        data={this.state.data}
        renderItem={this.renderItem}
        keyExtractor={item => item.name}
        stickyHeaderIndices={[0, 6, 13]}
      />

FlatList를 계속 스크롤하면 item0이 sticky하게 되어 item6, item13으로 대체됩니다.

_{(소스: 네이티브베이스).io)}

찾을 수 없습니다.stickyHeaderIndices를 참조해 주세요.하지만 소스코드에서 찾을 수 있어요. VirtualizedList가 서포트하고 있습니다.

가상화 리스트.js#L964

언급URL : https://stackoverflow.com/questions/44638286/how-do-you-make-the-listheadercomponent-of-a-react-native-flatlist-sticky