React Native-10:活动指示器loading
作者:互联网
import React, { useState, useEffect } from 'react'
import
{
StyleSheet, Text, View, Button,
ActivityIndicator // 活动指示器 loading
} from 'react-native'
const App = () =>
{
const [animation, setAnimation] = useState(true)
useEffect(() =>
{
closeActivityIndicator()
return () =>
{
}
}, [])
let closeActivityIndicator = () =>
{
setAnimation(!animation)
}
return (
<View style={styles.container}>
<Text style={styles.text}>羽神天下第一</Text>
{/* 活动指示器 切换 animation 属性进行显示隐藏切换 */}
<ActivityIndicator style={styles.activityIndicator} color="pink" size="large" animating={animation} />
<Button onPress={closeActivityIndicator} title='切换显示loading'></Button>
</View>
)
}
export default App
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 70
},
text: {
color: 'pink',
textAlign: 'center',
fontSize: 24
},
activityIndicator: {
height: 80
}
})
标签:styles,10,loading,const,指示器,React,animation,closeActivityIndicator 来源: https://blog.csdn.net/chuan0106/article/details/121264450