React Nativeでロードインジケーターを表示するにはどうすればよいですか？

読み込みインジケーターは、UIでのリクエストに時間がかかることをユーザーに伝えたい場合に使用します。ユーザーがフォームに入力した後に送信ボタンをクリックした場合、または検索ボタンをクリックしてデータを取得した場合。

ReactNativeは、UIに読み込みインジケーターを表示するさまざまな方法を持つActivityIndi​​catorコンポーネントを提供します。

基本的なActivityIndi​​catorコンポーネントは次のとおりです-

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

ActivityIndi​​catorを使用するには、次のようにインポートする必要があります-

import { ActivityIndicator} from 'react-native';

ActivityIndi​​catorで利用できる重要なプロパティのいくつかを次に示します。

例：ローディングインジケーターの表示

読み込みインジケーターはActivityIndi​​catorを使用して取得されるため、最初にインポートします-

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

使用されるActivityIndi​​catorコンポーネントは次のとおりです-

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

アニメーションはアニメーション変数に設定され、デフォルトではtrueに設定されています。メソッドcloseActivityIndi​​catorはcomponentDidMount（）関数内で呼び出され、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 (
         <View style = {styles.container}>
            <ActivityIndicator
               animating = {animating}
               color = '#bc2b78'
               size = "large"
               style = {styles.activityIndicator}/>
         </View>
      )
   }
}
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
   }
})

出力