const InputAuthCode = (props) => {
// 初始时间值:
var second = 60
const [time, modifyTimeValue] = useState(second)
const [timeId, setTimeId] = useState(null) // 定时器对象
// 定时器的函数:
const changeTime = (time) => {
const codeTime = time;
let now = Date.now()
const overTimeStamp = now + codeTime * 1000 + 100; //100毫秒,用于时间的容错
setTimeId(setInterval(function () {
const nowStamp = Date.now()
if (nowStamp >= overTimeStamp) {
// 倒计时结束
clearInterval(timeId)
} else {
const leftTime = parseInt((overTimeStamp - nowStamp) / 1000, 10)
modifyTimeValue(leftTime)
}
}, 1000))
}
// 倒计时监听
useEffect(() => {
// changeTime(second)
const listener = {
componentDidAppear:()=>{
changeTime(second)
},
componentDidDisappear:()=>{
clearInterval(timeId)
}
}
const unsubscribe = Navigation.events().registerComponentListener(listener, props.componentId);
return ()=>{
clearInterval(timeId)
unsubscribe.remove()//取消订阅
}
}, []);
return (
<View style={{flex:1}}>
<Text
onPress={()=>{
// 防止重复点击
if(time != 0 )return
// 重新初始化time的值;
modifyTimeValue(second)
// 重新调用定时器
changeTime(second)
}}
>重新获取(<Text>{time}</Text>)</Text>
</View>
)
}
}
export default InputAuthCode;
网友评论