React Nativeで読み込みインジケーターを表示するにはどうすればよいですか?

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

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

基本的な 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#2色#3サイズ例: ローディング インジケーターの表示 ローディング インジケーターは ActivityIndi​​cator を使用して実装されているため、最初に import -

	アニメーション p>読み込みインジケーターのアニメーション。ブール値を受け取ります インジケーターを表示する場合は true、インジケーターを非表示にする場合は false。
	読み込みインジケーターによって表示される色。 p>
hidesWhenStopped	インジケーターがアニメーション化されていないときに停止します。その値は 正しい、間違っている。 #4
	サイズインジケーター。値は小さいものから大きいものまであります。

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 中国語 Web サイトの他の関連記事を参照してください。