项目作者: meharbhutta

项目描述 :
Linear Timer component for React Native
高级语言: JavaScript
项目地址: git://github.com/meharbhutta/react-native-linear-timer.git
创建时间: 2019-05-11T10:53:56Z
项目社区:https://github.com/meharbhutta/react-native-linear-timer

开源协议:MIT License

下载


react-native-linear-timer

Linear Timer component for React Native


follow on Twitter

NPM

  • stable release version: version
  • package downloads: downloads
  • MIT license

Show Cases

IOS Android

Getting Started

Installation

  1. npm i react-native-linear-timer --save

Basic Usage

  • Install react-native-cli first
  1. $ npm install -g react-native-cli

Note: GUIDE

  • Initialization of a react-native project
  1. $ react-native init AwesomeProject
  • Then, edit AwesomeProject/App.js, like this:
  1. import * as React from 'react';
  2. import { View } from 'react-native';
  3. import LinearTimer from 'react-native-linear-timer';
  4. type Props = {}
  5. export default class App extends React.Component<Props> {
  6. render() {
  7. return (
  8. <View
  9. style={{
  10. flex: 1,
  11. justifyContent: 'center',
  12. alignItems: 'center',
  13. backgroundColor: 'white'
  14. }}
  15. >
  16. <LinearTimer
  17. min={2}
  18. onTimeElapsed={() => {
  19. console.log('Timer Finished!');
  20. }}
  21. />
  22. </View>
  23. );
  24. }
  25. }

Props

parameter type required description default
min number yes Time in minutes
height number no The height of the component 38
rermainingEndThreshold number no The threshold width after which the remaining end color change 10
elapsedIndicatorColor string no The elapsed time indicator color "#A8C3BC"
remainingIndicatorColor string no The remaining time indicator color "#0E3657"
rermainingEndIndicatorColor string no The remaining end time indicator color after threshold "#cc0000"
style object no To override the timer style default
textStyle object no To override the text style default
onTimeElapsed function no Callback for the timer end () => {}

To run example

  1. cd example
  2. npm install
  3. react-native run-android (For android)
  4. react-native run-ios (For ios)

In case of any issue follow the GUIDE.