zoukankan      html  css  js  c++  java
  • React Native ActivityIndicator(菊花组件)


    "use strict"

    import React, { Component } from 'react';
    import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    ActivityIndicator,
    TouchableOpacity
    } from 'react-native';

    class HelloWorld extends Component {

    // 通过state控制菊花转动 及 点击标题
    constructor(props) {

    super(props);
    this.state={
    animating: true,
    btnTitle: 'Touch End'
    };
    }

    activityIndicatorMethod() {

    if (this.state.animating) {
    this.setState({
    animating: false,
    btnTitle: 'Touch Start'

    });
    } else {
    this.setState({
    animating: true,
    btnTitle: 'Touch End'

    });
    }
    }

    // 可以参考ActivityIndicator 提供的API
        render() {
    return (
    <View style={styles.container}>
    <TouchableOpacity style={styles.btn} onPress={() => this.activityIndicatorMethod()}>
    <Text>{this.state.btnTitle}</Text>
    </TouchableOpacity>
    <ActivityIndicator style={{padding: 100}}
    animating={this.state.animating}
    size={'large'}
    hidesWhenStopped={true}/>
    </View>
    );
    }
    }

    const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'

    },
    btn: {
    200,
    backgroundColor: 'gray',
    justifyContent:'center',
    alignItems: 'center',
    borderRadius:4,

    },
    });

    AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

      

    
    
  • 相关阅读:
    图论模型--dijstra算法和floyd算法
    灰色预测模型
    多属性决策
    层次分析法
    一元多项式
    9.8一些错误的原因
    http协议笔记(不全)
    计网笔记1.18(不全)
    数据库基本操作
    flask-数据库
  • 原文地址:https://www.cnblogs.com/madaha/p/5943140.html
Copyright © 2011-2022 走看看