react native element timer

反应本元素调度

一个显示计时器和倒计时的组件。使用反应本地 - 背景调子实施

入门

    npm install react - native - element - timer -- save

或者

    yarn add react - native - element - timer 

演示

计时器道具

道具	类型	Isrequire	描述
缩写	数字	不	最初的几秒钟，Defalut为0
Autostart	布尔	不	自动启动计时器
开始	ref.start（）	是的	启动计时器
暂停	ref.pape（）	是的	暂停计时器
恢复	ref. resume（）	是的	简历计时器
停止	ref.stop（）	是的	停止计时器
风格	ViewStyle	不	造型容器视图
fontfomily	细绳	不	自定义字体样式
文本风格	文本风格	不	样式文字
formattime	HH：MM：SS或SS	不	格式时间
ontime	（秒）=> void	不	运行时间的回调
on par	（秒）=> void	不	暂停事件时回调
Onend	（秒）=> void	不	停止事件时回调

倒计时道具

道具	类型	Isrequire	默认
缩写	数字	是的	最初的几秒钟
Autostart	布尔	不	自动启动计时器
开始	ref.start（）	是的	启动计时器
暂停	ref.pape（）	是的	暂停计时器
恢复	ref. resume（）	是的	简历计时器
停止	ref.stop（）	是的	停止计时器
风格	ViewStyle	不	造型容器视图
fontfomily	细绳	不	自定义字体样式
文本风格	文本风格	不	样式文字
formattime	HH：MM：SS或SS	不	格式时间
ontime	（秒）=> void	不	运行时间的回调
on par	（秒）=> void	不	暂停事件时回调
Onend	（秒）=> void	不	停止事件时回调

用法

    import React , { useRef } from 'react' ;
    import { StyleSheet , Button , Text , SafeAreaView } from 'react-native' ;
    import { Timer , Countdown } from 'react-native-element-timer' ;

    const TimerScreen = _props => {
        const timerRef = useRef ( null ) ;
        const countdownRef = useRef ( null ) ;

        return (
            < SafeAreaView style = { styles . container } >
                < Text style = { styles . text } > Timer: </ Text >
                < Timer
                    ref = { timerRef }
                    style = { styles . timer }
                    textStyle = { styles . timerText }
                    onTimes = { e => { } }
                    onPause = { e => { } }
                    onEnd = { e => { } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Start' }
                    onPress = { ( ) => {
                        timerRef . current . start ( ) ;
                    } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Pause' }
                    onPress = { ( ) => {
                        timerRef . current . pause ( ) ;
                    } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Resume' }
                    onPress = { ( ) => {
                        timerRef . current . resume ( ) ;
                    } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Stop' }
                    onPress = { ( ) => {
                        timerRef . current . stop ( ) ;
                    } }
                />

                < Text style = { styles . text } > Countdown: </ Text >
                < Countdown
                    ref = { countdownRef }
                    style = { styles . timer }
                    textStyle = { styles . timerText }
                    initialSeconds = { 5 }
                    onTimes = { e => { } }
                    onPause = { e => { } }
                    onEnd = { ( e ) => { } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Start' }
                    onPress = { ( ) => {
                        countdownRef . current . start ( ) ;
                    } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Pause' }
                    onPress = { ( ) => {
                        countdownRef . current . pause ( ) ;
                    } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Resume' }
                    onPress = { ( ) => {
                        countdownRef . current . resume ( ) ;
                    } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Stop' }
                    onPress = { ( ) => {
                        countdownRef . current . stop ( ) ;
                    } }
                />
            </ SafeAreaView >
        ) ;
    } ;

    export default TimerScreen ;

    const styles = StyleSheet . create ( {
        container : {
            flex : 1 ,
            alignItems : 'center' ,
            padding : 20 ,
        } ,
        text : {
            fontWeight : 'bold' ,
            fontSize : 16 ,
            marginTop : 40 ,
        } ,
        timer : {
            marginVertical : 10 ,
        } ,
        timerText : {
            fontSize : 20 ,
        } ,
        button : {
            marginVertical : 5 ,
            backgroundColor : 'white' ,
            borderRadius : 24 ,
            width : 100 ,
        } ,
    } ) ; 

捐

为维护者提供捐款，并帮助他们继续活动。