rn-timer

Description

Install

$ npm install rn-timer --save

Props

|Props|Type|Optional|default|Description| |:--|:--|:--|:--:|:--| |timestamp|number|❎||未来的某个时间戳(计时结束时间戳)| | timerStep |number|✅||时间跨度,1000则为1s| | timerUnit |number|✅|ms|(未启用)| | binders |object|✅||值映射对| | timerFinishedListener |func|✅||计时器计时结束的回调|

Usage

Class TimerExample

export default class TimerExample extends Component {
  render() {
    const binder = { // 值-func 映射
      hour: (date: Date) => date.getUTCHours(),
      min: (date: Date) => date.getMinutes(),
      second: (date: Date) => date.getSeconds(),
    };

    return (
      <Timer
        timerStep={10}
        binders={binder}
        timestamp={new Date().getTime() + 50000}
        timerFinishedListener={() => {
          alert('end')
        }}>

		 // your cusotmer Timer Component
        <TimerUI/>

      </Timer>
    );
  }
}

class TimerUI (Your customer component)

import React, {Component} from 'react';
import { StyleSheet,  Text,  View} from 'react-native';

export default class TimerUI extends Component {

  static propTypes: {
    hour: React.PropTypes.number,
    min: React.PropTypes.number,
    second: React.PropTypes.number,
  }

  render() {
    const {hour, min, second} = this.props

    return (
      <View style={{marginTop: 20, flexDirection: 'column'}}>
        <Text>
          {`hour: ${hour}`}
        </Text>
        <Text>
          {`min: ${min}`}
        </Text>
        <Text>
          {`second: ${second}`}
        </Text>
      </View>
    );
  }
}