Как сделать, чтобы header во flatlist не уходил вниз при pull-to-refresh?

Для того чтобы header в FlatList не уходил вниз при pull-to-refresh, вам потребуется использовать компонент RefreshControl из React Native в связке с FlatList.

1. В первую очередь, добавьте компонент RefreshControl в FlatList. Этот компонент позволяет управлять поведением обновления данных при pull-to-refresh.

import React, { useState, useEffect } from 'react';
import { FlatList, RefreshControl } from 'react-native';

const MyList = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState([]);

  const fetchData = () => {
    // Здесь вы можете выполнить логику получения данных
    // Используйте setIsLoading(true) для отображения индикатора загрузки
    // Затем, когда данные будут получены, обновите состояние и установите setIsLoading(false)
  };

  useEffect(() => {
    fetchData();
  }, []);

  const onRefresh = () => {
    setIsLoading(true);
    fetchData();
    setIsLoading(false);
  };

  return (
    <FlatList
      data={data}
      keyExtractor={item => item.id}
      renderItem={({ item }) => <ListItem item={item} />}
      refreshControl={
        <RefreshControl
          refreshing={isLoading}
          onRefresh={onRefresh}
        />
      }
    />
  );
};

export default MyList;

В приведенном выше примере, компонент MyList - это ваша FlatList, которую вы рендерите на экране.

2. Определите состояние isLoading и data с помощью useState. isLoading устанавливает состояние загрузки данных, а data хранит полученные данные.

3. Создайте функцию fetchData, которая выполняет логику получения данных. Внутри функции, используйте setIsLoading(true) для отображения индикатора загрузки. Затем, когда данные будут получены, обновите состояние с помощью setData и установите setIsLoading(false), чтобы скрыть индикатор загрузки.

4. Используйте useEffect для вызова функции fetchData один раз при инициализации компонента.

5. Создайте функцию onRefresh, которая будет вызываться при pull-to-refresh. Эта функция устанавливает isLoading в true, вызывает fetchData для получения данных и устанавливает isLoading в false.

6. В конце, передайте компонент RefreshControl в свойство refreshControl FlatList. В компоненте RefreshControl, установите refreshing в состояние isLoading и onRefresh в функцию onRefresh.

Теперь, когда пользователь будет тянуть список вниз, компонент RefreshControl будет отображать индикатор загрузки, а затем вызывать функцию onRefresh для обновления данных.