在 React Native 加载数据时使用指示器（ActivityIndicator、react-native-skeleton-placeholder）

import React, { useEffect, useState } from 'react';
import { Text, ScrollView, RefreshControl, View, SafeAreaView } from 'react-native';
 
const Card = () => {
  const [now, setNow] = useState('');
 
  useEffect(() => {
    setTimeout(() => {
      setNow(new Date().toLocaleString());
    }, 2000);
  }, []);
 
  return (
    <View style={{ flex: 1 }}>
      {Array.from({ length: 100 }).map((_, index) => (
        <Text key={index} style={{ textAlign: 'center', justifyContent: 'center', fontSize: 20 }}>{`${now}`}</Text>
      ))}
    </View>
  );
};
 
const List = () => {
  const [key, setKey] = useState(new Date().getTime());
  const [refreshing, setRefreshing] = useState(false);
 
  const handleRefresh = () => {
    setRefreshing(true);
    setKey(new Date().getTime());
    setRefreshing(false);
  };
 
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'white', padding: 20 }}>
      <ScrollView
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} colors={['blue', 'red', 'green']} />
        }
      >
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <Card key={key} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};
 
export default List;

import React, { useEffect, useState } from 'react';
import { Text, ScrollView, RefreshControl, View, SafeAreaView, ActivityIndicator } from 'react-native';
 
const Card = () => {
  const [now, setNow] = useState('');
  const [isLoading, setIsLoading] = useState(true); // isLoading 추가
 
  useEffect(() => {
    setIsLoading(true); // 데이터 로딩 시작
    setTimeout(() => {
      setNow(new Date().toLocaleString());
      setIsLoading(false); // 데이터 로딩 완료
    }, 2000);
  }, []);
 
  return (
    <View style={{ flex: 1 }}>
      {isLoading ? (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', height: 200 }}>
          <ActivityIndicator size="large" color="blue" /> // ActivityIndicator 추가
        </View>
      ) : (
        Array.from({ length: 100 }).map((_, index) => (
          <Text key={index} style={{ textAlign: 'center', justifyContent: 'center', fontSize: 20 }}>{`${now}`}</Text>
        ))
      )}
    </View>
  );
};
 
const List = () => {
  const [key, setKey] = useState(new Date().getTime());
  const [refreshing, setRefreshing] = useState(false);
 
  const handleRefresh = () => {
    setRefreshing(true);
    setKey(new Date().getTime());
    setRefreshing(false);
  };
 
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'white', padding: 20 }}>
      <ScrollView
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} colors={['blue', 'red', 'green']} />
        }
      >
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <Card key={key} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};
 
export default List;

npm install @react-native-masked-view/masked-view react-native-linear-gradient --save
npm install react-native-skeleton-placeholder --save

yarn add @react-native-masked-view/masked-view react-native-linear-gradient 
yarn add react-native-skeleton-placeholder

 
import React, { useEffect, useState } from 'react';
import { Text, ScrollView, RefreshControl, View, SafeAreaView } from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 
const Card = () => {
  const [now, setNow] = useState('');
  const [isLoading, setIsLoading] = useState(true);
 
  useEffect(() => {
    setIsLoading(true);
    setTimeout(() => {
      setNow(new Date().toLocaleString());
      setIsLoading(false);
    }, 2000);
  }, []);
 
  return (
    <View style={{ flex: 1 }}>
      {isLoading ? (
        <SkeletonPlaceholder borderRadius={4}>
          <Text style={{ marginTop: 6, fontSize: 14, lineHeight: 18 }}>Hello world</Text>
        </SkeletonPlaceholder>
      ) : (
        Array.from({ length: 100 }).map((_, index) => (
          <Text key={index} style={{ textAlign: 'center', justifyContent: 'center', fontSize: 20 }}>{`${now}`}</Text>
        ))
      )}
    </View>
  );
};
 
const List = () => {
  const [key, setKey] = useState(new Date().getTime());
  const [refreshing, setRefreshing] = useState(false);
 
  const handleRefresh = () => {
    setRefreshing(true);
    setKey(new Date().getTime());
    setRefreshing(false);
  };
 
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'white', padding: 20 }}>
      <ScrollView
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} colors={['blue', 'red', 'green']} />
        }
      >
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <Card key={key} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};
 
export default List;