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
代码比较简单，只是练手用，如果对你有帮助那就更好了。
