react timer

最简单的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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容