001-簡單的秒表組件--react-native
一：
簡單的新手練手作品乖仇，嘗試一下自己編寫一個組件，正好前段時間一直有看大神們的計時器組件，打算著手寫一個秒表的計時器剑梳。
二：
1-：支持自己決定組件運行時間；
2-：支持暫停計時和清除計時的操作滑潘；
三：Coding
1-：設(shè)計變量
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;
//如果沒有設(shè)計時間就彈出'你還沒有設(shè)計時間'
if(this.state.minute==0&&this.state.second==0){
alert('你還沒有設(shè)計時間');
this.interval && clearInterval(this.interval);
this.setState({
changeState:false
})
}else if(this.state.second>=10) {
alert('最大為9秒');
//為了方便顯示我設(shè)置了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
代碼比較簡單粹舵，只是練手用钮孵，如果對你有幫助那就更好了。
