React-native-activityindicator

React Native-ActivityIndi​​cator

この章では、React Nativeでアクティビティインジケーターを使用する方法を示します。

ステップ1：アプリ

*App* コンポーネントは、 *ActivityIndi​​cator* のインポートと表示に使用されます。

Copy

App.js

import React from 'react'
import ActivityIndicatorExample from './activity_indicator_example.js'

const Home = () => {
   return (
      <ActivityIndicatorExample/>
   )
}
export default Home

Copy

ステップ2：ActivityIndi​​catorExample

アニメーションプロパティは、アクティビティインジケーターを表示するために使用されるブール値です。 後者は、コンポーネントが取り付けられてから6秒後に閉じます。 これは、* closeActivityIndi​​cator（）*関数を使用して行われます。

activity_indicator_example.js

import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, 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
   }
})

Copy

アプリを実行すると、画面にローダーが表示されます。 6秒後に消えます。

React Native Activity Indicator