react native element timer

React-Native-Element-Timer

Eine Komponente, die einen Timer und Countdown für React Native anzeigt. Implementiert mit React-Native-Background-Timer

Erste Schritte

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

oder

    yarn add react - native - element - timer 

Demo

Timer -Requisiten

Requisiten	Typ	IsRequire	Beschreibung
Initialsekunden	Nummer	NEIN	Initiale Sekunden ist Defalut 0
Autostart	Boolean	NEIN	Auto -Start -Timer
Start	Ref.Start ()	Ja	Timer starten
Pause	Ref.Pause ()	Ja	Pause Timer
wieder aufnehmen	Ref.Resume ()	Ja	Lebenslauf -Timer
stoppen	Ref.Stop ()	Ja	Timer stoppen
Stil	ViewStyle	NEIN	Styling -Containeransicht
Schriftfamilie	Saite	NEIN	Anpassen Sie den Schriftartenstil
Textstyle	Textstyle	NEIN	Styling -Text
Formattime	HH: MM: SS oder SS	NEIN	Formatzeit
Ontimes	(Sekunden) => void	NEIN	Rückruf bei Laufzeit
Onpause	(Sekunden) => void	NEIN	Rückruf, wenn das Pause -Ereignis aufgerufen wird
betreten	(Sekunden) => void	NEIN	Rückruf, wenn das Stop -Ereignis aufgerufen wird

Countdown -Requisiten

Requisiten	Typ	IsRequire	Standard
Initialsekunden	Nummer	Ja	Erste Sekunden
Autostart	Boolean	NEIN	Auto -Start -Timer
Start	Ref.Start ()	Ja	Timer starten
Pause	Ref.Pause ()	Ja	Pause Timer
wieder aufnehmen	Ref.Resume ()	Ja	Lebenslauf -Timer
stoppen	Ref.Stop ()	Ja	Timer stoppen
Stil	ViewStyle	NEIN	Styling -Containeransicht
Schriftfamilie	Saite	NEIN	Anpassen Sie den Schriftartenstil
Textstyle	Textstyle	NEIN	Styling -Text
Formattime	HH: MM: SS oder SS	NEIN	Formatzeit
Ontimes	(Sekunden) => void	NEIN	Rückruf bei Laufzeit
Onpause	(Sekunden) => void	NEIN	Rückruf, wenn das Pause -Ereignis aufgerufen wird
betreten	(Sekunden) => void	NEIN	Rückruf, wenn das Stop -Ereignis aufgerufen wird

Verwendung

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

Spenden

Unterstützen Sie die Betreuer mit einer Spende und helfen Sie ihnen, die Aktivitäten fortzusetzen.