上一节:
下一节:

  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
   }
})
    当我们运行应用程序时，我们将在屏幕上看到加载程序。它会在六秒后消失。
    React Native 活动指示器
上一节:
下一节: