Реагировать с прокручиваемым компонентом собственного представления отдельно с помощью FlatList? - PullRequest
Новая
       29

Реагировать с прокручиваемым компонентом собственного представления отдельно с помощью FlatList?

0 голосов
/ 21 февраля 2020

Есть ли способ прокрутить отдельный компонент с помощью FlatList? 

<View>
  <View>
    <Text>Some component outside of FlatList</Text>
    <Text>Porfile Information Above FlatList</Text>
    <Text>How to scroll with flatlist</Text>
  </View>

  <FlatList
    data={DATA}
    renderItem={({item}) => (
      <View>
        <Text>a bunch of list that will scroll</Text>
      </View>
    )}
  />
<View>

Так что, если вы отрендерите весь этот компонент, есть раздел над FlatList, и он останется там, пока только Прокручиваемый FlatList.

Как сделать так, чтобы верхняя часть могла прокручиваться с помощью FlatList?

1 Ответ

1 голос
/ 21 февраля 2020

Вы можете либо поместить свой компонент в ListHeaderComponent реквизит, предоставленный FlatList, например: 

<FlatList
    data={DATA}
    renderItem={({ item }) => (
        <View>
            <Text>a bunch of list that will scroll</Text>
        </View>
    )}
    ListHeaderComponent={
       <View>
          <Text>Some component outside of FlatList</Text>
          <Text>Porfile Information Above FlatList</Text>
          <Text>How to scroll with flatlist</Text>
       </View>
    }/>

, либо поместить все в ScrollView, не забудьте поместить View вокруг FlatList или иначе FlatList свиток может не работать: 

<ScrollView>
    <View>
      <Text>Some component outside of FlatList</Text>
      <Text>Porfile Information Above FlatList</Text>
      <Text>How to scroll with flatlist</Text>
   </View>
   <View>
        <FlatList
            data={DATA}
            renderItem={({item}) => (
                <View>
                    <Text>a bunch of list that will scroll</Text>
                </View>
         )}/>
   </View>
</ScrollView>
...