State(状态)

BlinkApp.js
/**
 * Created by zhoujian on 2019/4/9.
 */

import React, {Component} from 'react';
import {Text, View} from 'react-native';
import Blink from '../js/Blink'


export default class BlinkApp extends Component {

    render() {
        return (
            <View>
                <Blink text='I love to blink'/>
                <Blink text='Yes blinking is so great'/>
                <Blink text='Why did they ever take this out of HTML'/>
                <Blink text='Look at me look at me look at me'/>
            </View>
        );
    }
}

 

Blink.js
/**
 * Created by zhoujian on 2019/4/9.
 */
import React, {Component} from 'react';
import {Text, View} from 'react-native';

export default class Blink extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {isShowingText: true};

        setInterval(() => {
            this.setState(previousState => {
                    return {isShowingText: !previousState.isShowingText};
                }
            );
        }, 1000);
    }

    render() {
        if (!this.state.isShowingText) {
            return null
        } else {
            return (
                <Text>{this.props.text}</Text>
            );
        }
    }
}

 

 

index.js


import {AppRegistry} from 'react-native';
import BlinkApp from './js/BlinkApp';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => BlinkApp);

 

State(状态)