最简单的timer demo
import React, {Component} from 'react';
import {View} from 'react-native';
export default class DemoTimer extends Component {
componentDidMount() {
//设置500 ms后执行，打印log
this.timer = setTimeout(() => {
console.log('a simple timer');
}, 500);
}
componentWillUnmount() {
//在unmount回调清除定时器
this.timer && clearTimeout(this.timer);
}
render() {
return (
<View style={{
...this.props.style
}}>
{this.props.children}
</View>
);
}
};
index.android.js
import React, {Component} from 'react';
import {
AppRegistry,
TouchableOpacity,
Text,
View,
StyleSheet,
Alert
} from 'react-native';
import DemoTimer from './src/timer';
class DemoMain extends Component {
render() {
return (
<View style={styles.container}>
<DemoTimer
style={{
width: 250,
height: 50,
backgroundColor: 'powderblue',
alignItems: 'center',
justifyContent: 'center'
}}>
<Text
style={{
fontSize: 28,
textAlign: 'center',
margin: 10
}}>Demo Timer</Text>
</DemoTimer>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
// 注册应用(registerComponent)后才能正确渲染 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
AppRegistry.registerComponent('DemoProject', () => DemoMain);
