001-简单的秒表组件--react-native

001-简单的秒表组件--react-native

一：

简单的新手练手作品，尝试一下自己编写一个组件，正好前段时间一直有看大神们的计时器组件，打算着手写一个秒表的计时器。

二：

1-：支持自己决定组件运行时间；

2-：支持暂停计时和清除计时的操作；

三：Coding
1-：设计变量

    export default class TimesComponent extends Component {
    constructor(props) {
        super(props);
        this.state={
            changeState:false,
            timeNumber:0,       //跑的秒
            minuteNumber:0,     //跑的分
            minute:0,           //你所需要的分
            second:0            //你所需要的秒
        };
    }

2-：简单的布局

render() {
        const {timeNumber,minuteNumber}=this.state;
        //如果开始计时，则'开始计时'不能按
        var Main;
        Main=(this.state.changeState==false
            ?<TouchableOpacity
                onPress={()=>{
                    this.timing();
                }}
            >
                <Text>开始计时</Text>
            </TouchableOpacity>
            :<Text>开始计时</Text>);
        return (
        //用TextInput来输入秒表需要跑的时间
            <View style={styles.container}>
                <View style={{flexDirection:'row'}}>
                    <Text>你打算跑<TextInput
                        style={styles.textInput}
                        autoCapitalize="none"
                        autoCorrect={false}
                        maxLength={2}
                        selectTextOnFocus={true}
                        onChangeText={(Number)=>{
                            this.setState({
                                minute:Number,
                            })
                        }}
                    />分<TextInput
                        style={styles.textInput}
                        autoCapitalize="none"
                        autoCorrect={false}
                        maxLength={2}
                        selectTextOnFocus={true}
                        onChangeText={(Number)=>{
                            this.setState({
                                second:Number,
                            })
                        }}
                    />秒</Text>
                </View>
                <View style={{flexDirection:'row'}}>
                    <Text >{minuteNumber}分</Text>
                    <Text >{timeNumber}秒</Text>
                </View>
                {Main}
                <TouchableOpacity
                    onPress={()=>{
                        this.stop()
                    }}
                >
                    <Text>暂停</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={()=>{
                        this.clear();
                    }}
                >
                    <Text>清除时间</Text>
                </TouchableOpacity>
            </View>
        );
    }

3-：开始计时的方法

timing=()=>{
        const times=this.state.timeNumber;
        const minutes=this.state.minuteNumber;

        //如果没有设计时间就弹出'你还没有设计时间'
        if(this.state.minute==0&&this.state.second==0){
            alert('你还没有设计时间');
            this.interval && clearInterval(this.interval);
            this.setState({
                changeState:false
            })
        }else if(this.state.second>=10) {
            alert('最大为9秒');
            //为了方便显示我设置了10s进1，所以秒钟上最大为9
            this.setState({
                changeState:false
            })
        }else {

            //开始计时
            this.setState({
                changeState:!this.state.changeState,
            },()=>{
                if(this.state.changeState) {
                    this.interval = setInterval(() => {
                        const timer = this.state.timeNumber + 1;
                        const minuter = this.state.minuteNumber;
                        //如果秒跑到了10，那么分钟加1，秒变回0
                        if (timer == 10) {
                            const minuter = this.state.minuteNumber + 1;
                            this.setState({
                                timeNumber: 0,
                                minuteNumber: minuter
                            })

                            //如过跑到了你输入的时间则停止，并且告诉你时间到了
                        } else if (minuter >= this.state.minute && timer >= this.state.second) {
                            this.interval && clearInterval(this.interval);
                            this.setState({
                                timeNumber:timer
                            });
                            alert('时间到了');
                            //显示跑了多久了
                        } else if (timer != 10) {
                            this.setState({
                                timeNumber: timer,
                                minuteNumber: minuter,
                            })
                        }
                    }, 1000);
                }
            })
        }
    };

4-:暂停计时器

 stop=()=>{
        this.interval && clearInterval(this.interval);
        this.setState({
            changeState:false
        })
    };

5-：清除计时器上的时间

 clear=()=>{
        this.interval && clearInterval(this.interval);
        this.setState({
            timeNumber:0,
            minuteNumber:0,
            changeState:false
        })
    };

运行效果

aaaa.gif

代码比较简单，只是练手用，如果对你有帮助那就更好了。