Компонент RefreshControl

Компонент RefreshControl вешают на прокручиваемый список через параметр refreshControl у ScrollView или FlatList. Пользователь тянет список вниз, пока идет загрузка, виден индикатор. По окончании загрузки сбрасывают флаг refreshing.

Синтаксис

<ScrollView
	refreshControl={
		<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
	}
/>

Параметры

Параметр	Описание
`refreshing`	При `true` показывается индикатор обновления и удерживается жест.
`onRefresh`	Вызов при жесте вниз. Здесь запускают загрузку данных и меняют `refreshing`.

Пример

Давайте обновим содержимое ScrollView по жесту:

import { useState } from 'react';
import { ScrollView, Text, RefreshControl } from 'react-native';

export default function App() {
	const [refreshing, setRefreshing] = useState(false);
	const [label, setLabel] = useState('abcde');

	const onRefresh = () => {
		setRefreshing(true);
		setLabel('12345');
		setRefreshing(false);
	};

	return (
		<ScrollView
			refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
		>
			<Text>{label}</Text>
		</ScrollView>
	);
}

На экране после потягивания вниз текст сменится на '12345'.

Пример

Давайте подключим обновление к FlatList:

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

export default function App() {
	const [refreshing, setRefreshing] = useState(false);
	const [data, setData] = useState(['abcde', '12345']);

	const onRefresh = () => {
		setRefreshing(true);
		setData(['12345', 'abcde']);
		setRefreshing(false);
	};

	return (
		<FlatList
			data={data}
			keyExtractor={(item, index) => String(index)}
			renderItem={({ item }) => <Text>{item}</Text>}
			refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
		/>
	);
}

На экране после жеста вниз порядок строк в списке поменяется местами.

Смотрите также

компонент FlatList,
который принимает refreshControl
компонент ScrollView,
который прокручивает дочерние элементы
компонент ActivityIndicator,
который рисует индикатор загрузки
компонент SectionList,
который тоже поддерживает refreshControl