В этой главе мы покажем вам, как использовать индикатор активности в React Native.
Шаг 1: приложение
Компонент приложения будет использоваться для импорта и отображения нашего ActivityIndicator .
App.js
import React from 'react' import ActivityIndicatorExample from './activity_indicator_example.js' const Home = () => { return ( <ActivityIndicatorExample /> ) } export default Home
Шаг 2: ActivityIndicatorExample
Свойство Animating — это логическое значение, которое используется для отображения индикатора активности. Последний закрывается через шесть секунд после установки компонента. Это делается с помощью функции 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 } })
Когда мы запустим приложение, мы увидим загрузчик на экране. Он исчезнет через шесть секунд.