clearInterval не работает в нативной реакции - PullRequest
Новая
       17

clearInterval не работает в нативной реакции

0 голосов
/ 14 января 2020

Я написал штрих-код прогресса (в android и IOS) через функциональный компонент. Есть три кнопки, одна из которых запускает индикатор выполнения, другая останавливает его, а последняя перезапускает. Кнопка Стоп не работает, Кажется, что clearInterval не работает, Пожалуйста, посмотрите и помогите мне решить эту проблему? 


const MainFunc = (props) => {



    let [ProgresValue, setProgresValue] = useState(0);

    let IntValue = '';
    const StartProgress = () => {

        IntValue = setInterval(() => {
            if (ProgresValue <= 1) {

                setProgresValue(ProgresValue = ProgresValue + 0.01)

            }

        }, 100);

    }



    const StopProgress = () => {

        clearInterval(IntValue)


    }


    const RestartProgress = () => {

        setProgresValue(ProgresValue = 0)


    }





    return (
        <Fragment>
            <Text>Progress Bar:{parseFloat((ProgresValue * 100).toFixed(3))}%</Text>

            {
                (Platform.OS === 'android')
                    ?
                    (<ProgressBarAndroid
                        styleAttr='Horizontal'
                        indeterminate={false}
                        progress={ProgresValue}



                    />)
                    :
                    (<ProgressViewIOS
                        progress={ProgresValue}

                    />)


            }

            <TouchableHighlight onPress={StartProgress} style={styles.button}><Text style={{ color: 'white', textAlign: 'center' }}>Start Prgress</Text></TouchableHighlight>
            <TouchableHighlight onPress={StopProgress} style={styles.button} ><Text style={{ color: 'white', textAlign: 'center' }} >Stop Progress</Text></TouchableHighlight>
            <TouchableHighlight onPress={RestartProgress} style={styles.button}><Text style={{ color: 'white', textAlign: 'center' }} >Restart Progress</Text></TouchableHighlight>



        </Fragment>


    )



}
...