TimersView

TimersView.js

import React from 'react';import {    StyleSheet,    View,    Text,    Button,} from 'react-native';var TimerMixin = require('react-timer-mixin');export default class TimersView extends React.Component{    constructor(props) {         super(props);           this.state={           content:'',           sum : 0,         };    }    componentDidMount() {      this.timer = setTimeout(() => {       this.setState({content:'我是定时器setTimeout只会执行一次'});      },500);    }    componentWillUnmount() {      // 如果存在this.timer，则使用clearTimeout清空。      // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear      this.timer && clearTimeout(this.timer);      this.interval && clearInterval(this.interval);    }    render(){    return(    <View style={{margin:20}}>            <Text style = {styles.txt}>{this.state.content}</Text>            <Text></Text>            <Text style = {styles.txt}>我是定时器setInterVal间隔执行，打印：+ {this.state.sum}</Text>            <Text></Text>            <Button                title = '点击我开始间隔计时'                style = { styles.btn}                 onPress = { ()=> {this.interval = setInterval(()=> {this.setState({sum : this.state.sum + 1 });},500);}}            />             <Text style = {{height : 20 }}/>            <Button                   title = '点击我取消计时'                 style = { styles.btn}                  onPress = {()=> {this.interval && clearInterval(this.interval);}}></Button>    </View>    );    }}const styles = StyleSheet.create({  txt: {    fontSize: 30,    textAlign: 'center',    margin: 50,  },  btn: {     height : 50,  },});

使用：

import React from 'react';import {   AppRegistry,   View,   Text,   StyleSheet,   Animated,   Image,} from 'react-native';import TimersView from './TimersView';class MyFirstProject extends React.Component{    render() {        return (             <View>                 <TimersView>                 </TimersView>             </View>        );    }}AppRegistry.registerComponent('MyFirstProject', ()=> MyFirstProject);

效果图：