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);