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 ,
        } ,
    } ) ; 

捐

為維護者提供捐款，並幫助他們繼續活動。