React Native的加載指示器自定義

在React Native中，你可以使用ActivityIndicator組件來自定義加載指示器。ActivityIndicator組件允許你通過size和color屬性來定制其樣式。

下面是一個簡單的例子，展示了如何在React Native中使用自定義樣式的ActivityIndicator：

import React, {useState, useEffect} from 'react';
import {View, ActivityIndicator, StyleSheet} from 'react-native';

const App = () => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 3000);
  }, []);

  if (isLoading) {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  } else {
    return (
      <View style={styles.container}>
        <Text>數據加載完成！</Text>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

在上面的例子中，我們首先導入了必要的組件和樣式。然后，我們使用useState和useEffect鉤子來控制加載指示器的顯示和隱藏。在useEffect鉤子中，我們設置了一個3秒的定時器，用于模擬數據加載過程。當定時器到期時，我們將isLoading狀態設置為false，從而隱藏加載指示器并顯示“數據加載完成！”的文本。

在App組件的返回值中，我們根據isLoading狀態來決定渲染加載指示器還是文本。如果isLoading為true，則渲染一個帶有自定義大小和顏色的ActivityIndicator組件。否則，渲染一個顯示“數據加載完成！”的文本組件。

你可以通過修改ActivityIndicator組件的size和color屬性來定制其樣式。例如，你可以將size設置為'small'、'medium'或'large'，并將color設置為你想要的顏色值。