最簡單的timer demo
import React, {Component} from 'react';
import {View} from 'react-native';
export default class DemoTimer extends Component {
componentDidMount() {
//設(shè)置500 ms后執(zhí)行晕讲，打印log
this.timer = setTimeout(() => {
console.log('a simple timer');
}, 500);
}
componentWillUnmount() {
//在unmount回調(diào)清除定時器
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'
}
});
// 注冊應(yīng)用(registerComponent)后才能正確渲染 注意：只把應(yīng)用作為一個整體注冊一次，而不是每個組件/模塊都注冊
AppRegistry.registerComponent('DemoProject', () => DemoMain);
