react native element timer

react-natif-élémentaire

Un composant qui affiche une minuterie et un compte à rebours pour React Native. Implémenté à l'aide de react-native-background-timer

Commencer

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

ou

    yarn add react - native - element - timer 

Démo

Accessoires de minuterie

Accessoires	Taper	isRequire	Description
deuxième secondes	Nombre	Non	Premières secondes, Defalut est 0
AutoStart	Booléen	Non	Minuterie de démarrage automatique
commencer	Ref.start ()	Oui	Démarrer
pause	Réf.Pause ()	Oui	Pause de pause
CV	ref.Resume ()	Oui	Minuterie de curriculum vitae
arrêt	ref.stop ()	Oui	Minuterie
style	Viewstyle	Non	Vue de conteneur de style
fonte	Chaîne	Non	Personnaliser le style de police
stage	Stage	Non	Texte de coiffage
en temps de forme	HH: MM: SS ou SS	Non	Temps de format
sur les temps	(secondes) => void	Non	rappel lors de la durée de l'exécution
onpause	(secondes) => void	Non	Rappel lorsque l'événement de pause est appelé
finesse	(secondes) => void	Non	Rappel lorsque l'événement d'arrêt est appelé

Comptes à rebours

Accessoires	Taper	isRequire	défaut
deuxième secondes	Nombre	Oui	Secondes initiales
AutoStart	Booléen	Non	Minuterie de démarrage automatique
commencer	Ref.start ()	Oui	Démarrer
pause	Réf.Pause ()	Oui	Pause de pause
CV	ref.Resume ()	Oui	Minuterie de curriculum vitae
arrêt	ref.stop ()	Oui	Minuterie
style	Viewstyle	Non	Vue de conteneur de style
fonte	Chaîne	Non	Personnaliser le style de police
stage	Stage	Non	Texte de coiffage
en temps de forme	HH: MM: SS ou SS	Non	Temps de format
sur les temps	(secondes) => void	Non	rappel lors de la durée de l'exécution
onpause	(secondes) => void	Non	Rappel lorsque l'événement de pause est appelé
finesse	(secondes) => void	Non	Rappel lorsque l'événement d'arrêt est appelé

Usage

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

Faire un don

Soutenez les mainteneurs avec un don et aidez-les à poursuivre les activités.