React Native的加載指示器自定義

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

下面是一個(gè)簡(jiǎn)單的例子，展示了如何在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>數(shù)據(jù)加載完成！</Text>
      </View>
    );
  }
};

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

export default App;

在上面的例子中，我們首先導(dǎo)入了必要的組件和樣式。然后，我們使用useState和useEffect鉤子來控制加載指示器的顯示和隱藏。在useEffect鉤子中，我們?cè)O(shè)置了一個(gè)3秒的定時(shí)器，用于模擬數(shù)據(jù)加載過程。當(dāng)定時(shí)器到期時(shí)，我們將isLoading狀態(tài)設(shè)置為false，從而隱藏加載指示器并顯示“數(shù)據(jù)加載完成！”的文本。

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

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