rn 圆圈加载指示器组件ActivityIndicator、按钮组件Button

桃扇骨 2021-07-24 14:49 546阅读 0赞

活动指示器
    1、引入
    	import { ActivityIndicator} from "react-native";
    
    2、使用
    	<ActivityIndicator size="large" color="#0000ff" />
    
    3、参数
    	animating	是否要显示指示器动画，默认为 true 表示显示，false 则隐藏
    	color	滚轮的前景颜色（iOS 上默认为灰色，安卓上默认为深绿色）。
    	size	指示器的大小，默认为'small'。目前只能在 Android 上设定具体的数值。
    		'small'、'large'或number
    	hidesWhenStopped	在animating为 false 的时候，是否要隐藏指示器（默认为 true）。如果animating和hidesWhenStopped都为 false，则显示一个静止的指示器。
    
    按钮
    <Button title='设置按钮文本内容'></Button>

代码示例:

import React,{ Component} from 'react'
    import { ActivityIndicator,View,Text,TouchableOpacity,Button,StyleSheet} from 'react-native'
    
    export default class Act extends Component{ 
        state={ 
            flag:true
        }
        close=function(){ 
            this.setState({ 
                flag:!this.state.flag
            })
        }
        componentDidMount=()=>this.close()
        render(){ 
            return(
                <>
                    <ActivityIndicator 
                        animating={ this.state.flag}
                        color='red'
                        //small
                        size='large'
                        style={ style.act}
    
                    />    
                    <Button  onPress={ this.close.bind(this)} title='开关'></Button>
                </>
            )
        }
    }
    
    const style=StyleSheet.create({ 
        act:{ 
            height:60,
            width:80
        }
    })