📅  最后修改于: 2020-12-08 06:11:23             🧑  作者: Mango
在本章中,我们将向您展示如何在React Native中使用活动指示器。
应用程序组件将用于导入和显示我们的ActivityIndicator 。
import React from 'react'
import ActivityIndicatorExample from './activity_indicator_example.js'
const Home = () => {
return (
)
}
export default Home
Animating属性是一个布尔值,用于显示活动指示器。组件安装后六秒关闭。这是使用closeActivityIndicator()函数的。
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 (
)
}
}
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
}
})
当我们运行该应用程序时,我们将在屏幕上看到加载程序。六秒钟后它将消失。