react native element timer

반응 신용 요소 타이머

React Native의 타이머 및 카운트 다운을 표시하는 구성 요소. React-Native-Background-Timer를 사용하여 구현되었습니다

시작하기

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

또는

    yarn add react - native - element - timer 

데모

타이머 소품

소품	유형	ISREQUIRE	설명
초기	숫자	아니요	초기 초, defalut는 0입니다
AutosTart	부울	아니요	자동 시작 타이머
시작	ref.start ()	예	시작 타이머를 시작하십시오
정지시키다	ref.pause ()	예	일시 정지 타이머
재개하다	ref.resume ()	예	타이머를 재개하십시오
멈추다	ref.stop ()	예	타이머를 중지하십시오
스타일	뷰 스타일	아니요	스타일링 컨테이너 뷰
글꼴	끈	아니요	글꼴 스타일을 사용자 정의하십시오
텍스트 스타일	텍스트 스타일	아니요	스타일링 텍스트
Formattime	HH : MM : SS 또는 SS	아니요	형식 시간
ontimes	(초) => void	아니요	실행 시간시 콜백
onpause	(초) => void	아니요	일시 정지 이벤트가 호출되면 콜백
onend	(초) => void	아니요	콜백 스톱 이벤트가 호출 될 때

카운트 다운 소품

소품	유형	ISREQUIRE	기본
초기	숫자	예	초기 초
AutosTart	부울	아니요	자동 시작 타이머
시작	ref.start ()	예	시작 타이머를 시작하십시오
정지시키다	ref.pause ()	예	일시 정지 타이머
재개하다	ref.resume ()	예	타이머를 재개하십시오
멈추다	ref.stop ()	예	타이머를 중지하십시오
스타일	뷰 스타일	아니요	스타일링 컨테이너 뷰
글꼴	끈	아니요	글꼴 스타일을 사용자 정의하십시오
텍스트 스타일	텍스트 스타일	아니요	스타일링 텍스트
Formattime	HH : MM : SS 또는 SS	아니요	형식 시간
ontimes	(초) => void	아니요	실행 시간시 콜백
onpause	(초) => 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 ,
        } ,
    } ) ; 

기부

기부금을 지원하고 활동을 계속할 수 있도록 지원합니다.