React Native - ActivityIndi​​cator

• 

  简述

  在本章中，我们将向您展示如何在 React Native 中使用活动指示器。
• 

  第 1 步：应用程序

  App组件将用于导入并显示我们的ActivityIndicator.

  app.js

  
  import React from 'react'
  import ActivityIndicatorExample from './activity_indicator_example.js'
  const Home = () => {
     return (
        <ActivityIndicatorExample />
     )
  }
  export default Home
  

• 

  第 2 步：ActivityIndi​​cator 示例

  动画属性是一个布尔值，用于显示活动指示器。后者在组件安装后六秒关闭。这是使用closeActivityIndicator()功能。

  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
     }
  })
  

  当我们运行应用程序时，我们将在屏幕上看到加载程序。它会在六秒后消失。