如何在 React Native 中顯示載入指示器？

當我們想要告訴使用者他們在 UI 上發出的請求需要時間時，請使用載入指示器。如果使用者在填寫表單後點擊了提交按鈕，或點擊了搜尋按鈕以取得一些資料。

ReactNative 提供了一個ActivityIndi​​cator 元件，它可以透過不同的方式在UI 上顯示載入指示器.

基本的ActivityIndi​​cator 元件如下-

<ActivityIndicator animating = {animating} color = &#39;#bc2b78&#39; size = "large"
style = {yourstyle}/>

要使用ActivityIndi​​cator，您需要如下匯入它-

import { ActivityIndicator} from 'react-native';

以下是ActivityIndi​​cator 提供的一些重要屬性。

Sr.No	道具和說明
1	動畫 用於載入指示器的動畫。它採用布林值 true 則顯示指示器， false 則隱藏指示器。
2	顏色 載入指示器顯示的顏色。
3	hidesWhenStopped 當指示器沒有動畫時停止。其值為 正確/錯誤。
4	大小 大小指標。數值有小有大。

範例：載入指標的顯示

#載入指示器是使用ActivityIndi​​cator 實作的，因此首先導入-

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

這是使用的ActivityIndi​​cator 元件-

<ActivityIndicator
   animating = {animating}
   color = &#39;#bc2b78&#39;
   size = "large"
style = {styles.activityIndicator}/>

動畫設定為動畫變量，預設為true。在 componentDidMount() 函數中呼叫 closeActivityIndi​​cator 方法，該函數將在 1 分鐘後將動畫狀態設為 false。

state = { animating: true }
   closeActivityIndicator = () => setTimeout(() => this.setState({
   animating: false }), 60000)
   componentDidMount = () => this.closeActivityIndicator()

這是顯示載入指示器的完整程式碼 -

import React, { Component } from 'react';
import { ActivityIndicator, View, StyleSheet } from 'react-native';
class ActivityIndicatorExample extends Component {
   state = { animating: true }
   closeActivityIndicator = () => setTimeout(() => this.setState({
   animating: false }), 60000)
   componentDidMount = () => this.closeActivityIndicator()
   render() {
      const animating = this.state.animating
      return (
         
            
         
      )
   }
}
export default ActivityIndicatorExample
const styles = StyleSheet.create ({
   container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      marginTop: 70
   },
   activityIndicator: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      height: 80
   }
})

輸出

#

以上是如何在 React Native 中顯示載入指示器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！