在React Native中刷新页面：RefreshControl

import React, { useState } from 'react';
import { Text, ScrollView } from 'react-native';
 
const List = () => {
  const [refreshTime, setRefreshTime] = useState(0);
 
  return (
    <ScrollView style={{ flex: 1, backgroundColor: 'white', padding: 20 }}>
      {Array.from({ length: 100 }).map((_, index) => (
        <Text key={index} style={{ textAlign: 'center', justifyContent: 'center', fontSize: 30 }}>
          {`새로고침 ${refreshTime}회`}
        </Text>
      ))}
    </ScrollView>
  );
};
 
export default List;

import React, { useState } from 'react';
import { Text, ScrollView, RefreshControl } from 'react-native';
 
const List = () => {
  const [refreshing, setRefreshing] = useState(false); // 새로고침 상태를 나타내는 상태 변수
  const [refreshTime, setRefreshTime] = useState(0);
 
  const handleRefresh = () => { // 새로고침 기능을 구현하는 함수
    setRefreshing(true);
    setTimeout(() => { // 1초의 딜레이
      setRefreshTime(refreshTime + 1); // 새로고침시 실행되는 함수
      setRefreshing(false);
    }, 1000);
  };
 
  return (
    <ScrollView
      style={{ flex: 1, backgroundColor: 'white', padding: 20 }}
      refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}
    >
      {Array.from({ length: 100 }).map((_, index) => (
        <Text key={index} style={{ textAlign: 'center', justifyContent: 'center', fontSize: 30 }}>
          {`새로고침 ${refreshTime}회`}
        </Text>
      ))}
    </ScrollView>
  );
};
 
export default List;

// ... 
	<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} colors={['blue', 'red', 'green']} /> // Android
	<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} tintColor="blue" /> // iOS
// ...

// ... 
	<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} enabled={false} /> 
	// 새로고침 기능 비활성화 (Android)
// ...

// ... 
	<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} progressBackgroundColor="blue" />
	// 새로고침 아이콘의 배경색 설정 (Android)
// ...

// ... 
	<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} size="large" />
	// 새로고침 아이콘의 사이즈 설정 (Android)
// ...

// ... 
	<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} title="새로고침" titleColor="blue" />
	// 새로고침 아이콘 아래에 제목 표시 (Ios)
// ...