美文网首页
RN 倒计时及页面退出清空倒计时

RN 倒计时及页面退出清空倒计时

作者: Blue_Color | 来源:发表于2022-03-15 18:08 被阅读0次
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;

相关文章

网友评论

      本文标题:RN 倒计时及页面退出清空倒计时

      本文链接:https://www.haomeiwen.com/subject/ufmydrtx.html