RN自定义倒计时组件

最新推荐文章于 2024-08-09 07:57:35 发布

Quiet-Night

最新推荐文章于 2024-08-09 07:57:35 发布

阅读量2.8k

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/DeepLies/article/details/53129982

版权

在RN应用开发中，为了解决react-native-video组件与react-native-sk-countdown共存导致的倒计时问题，作者决定自定义一个简单的倒计时组件。该组件仅包含基本的倒计时功能，支持自定义样式和倒计时结束后的回调，适用于一般场景，并且由于代码逻辑简洁，方便进行个性化修改。

摘要由CSDN通过智能技术生成

最近在做一个基于RN的App，需要用到播放视频的组件，官方没有，只能从第三方寻找，react-native-video首当其冲。
之前感觉这个组件还是蛮好用的，但是后来出现需要在一个使用react-native-video的地方，再放一个倒计时组件的场景，倒计时首先采用的是react-native-sk-countdown,本来这两个组件若是不放在一起，都运行良好，但是结果放在同一个组件中，react-native-sk-countdown总是会因为视频的播放进度而导致只能在1s内循环，无法倒计时到0，捣鼓了一个晚上，还是没能找出头绪来，干脆自己动手做一个得了。
当然，我只是想要一个最简单的倒计时组件而已，react-native-sk-countdown其实还是有些重型了，而我自定义的这个倒计时组件自然比不上的。

组件的代码如下：

class MyCountTime extends Component{
   
    constructor(props) {
        super(props);
        let timeLeft=this.props.timeLeft>0 ? this.props.timeLeft:5
        let width=this.props.width || 60
        let height=this.props.height || 32
        l