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: {
        width: 200,
        backgroundColor: 'gray',
        justifyContent:'center',
        alignItems: 'center',
        borderRadius:4,

    },
});

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