React Native - ActivityIndicator
Bu bölümde size React Native'deki etkinlik göstergesini nasıl kullanacağınızı göstereceğiz.
1. Adım: Uygulama
App bileşeni içe aktarmak ve göstermek için kullanılacak ActivityIndicator.
App.js
import React from 'react'
import ActivityIndicatorExample from './activity_indicator_example.js'
const Home = () => {
return (
<ActivityIndicatorExample />
)
}
export default Home
2. Adım: ActivityIndicatorExample
Animasyon özelliği, etkinlik göstergesini göstermek için kullanılan bir Boole'dir. İkincisi, bileşen monte edildikten altı saniye sonra kapanır. Bu,closeActivityIndicator() işlevi.
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
}
})
Uygulamayı çalıştırdığımızda, yükleyiciyi ekranda göreceğiz. Altı saniye sonra kaybolacaktır.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/react_native_activity_indicator.jpg)