亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React Native - 如何每 x 毫秒重新渲染一個組件?

React Native - 如何每 x 毫秒重新渲染一個組件?

開心每一天1111 2022-11-11 16:09:50
好的,我嘗試每 x 毫秒更新一次組件的屬性和/或文本。我深入研究了https://www.npmjs.com/package/react-interval-renderer等,但是我遇到了與 s 相關的錯誤。我現在看的是簡單地反應原生(IOS)。如何更新生效日期(毫秒)但是在將其格式化為我的文件時遇到問題。我有:export default props => {  let [fontsLoaded] = useFonts({    'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',  });  this.state ={   color: "#fff",   colorAnimTime: 36000,   time: 0  }    setInterval(() => {      this.setState({        time: new Date().getMilliseconds()      });    }, 1000);//------------------------------------------------------------------->  if (!fontsLoaded) {    return <AppLoading />;  } else {    const styles = StyleSheet.create({      container: { flex: 1,      alignItems: 'center',      justifyContent: 'center',    },      textWrapper: {        height: hp('70%'), // 70% of height device screen        width: wp('80%'),   // 80% of width device screen        justifyContent: 'center',        alignItems: 'center',      },      myText: {        fontSize: hp('5.5%'), // End result looks like the provided UI mockup        fontFamily: 'SequelSans-BlackDisp'      }    });      return (        <AnimatedBackgroundColorView        color='#00acdd'        delay={0.5}        duration={36000}        initialColor={this.state.color}        style={styles.container}>          <View style={styles.textWrapper}>            <Text style={styles.myText}>COLOR</Text>          </View>        </AnimatedBackgroundColorView>      );  }引用的答案用于componentDidMount() {括起來setInterval,但是如果我把它放在我目前擁有setInterval現在我得到this.setState 不是函數并嘗試將其綁定setInterval到右側this,但我相信我不明白如何設置我的文件。1000 毫秒后,我想更改我的“顏色”<AnimatedBackgroundColorView>并重新加載組件。(所以它再次動畫 - https://www.npmjs.com/package/react-native-animated-background-color-view)我怎樣才能做到這一點?
查看完整描述

1 回答

?
慕仙森

TA貢獻1827條經驗 獲得超8個贊

您的組件被編寫為功能組件,而不是類。要創建有狀態的功能組件,您需要使用 hook setState。您收到此錯誤是因為setState組件上沒有對象屬性或this. 您還需要使用useEffect掛鉤來設置間隔。


https://reactjs.org/docs/hooks-reference.html


import React, { useState } from 'react';


export default props => {

  let [fontsLoaded] = useFonts({

    'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',

  });


  const color = "#fff";

  const colorAnimTime = 36000;

  const [time, setTime] = useState(0);


  useEffect(() => {

    const interval = setInterval(() => {

      setTime(new Date().getMilliseconds));

    }, 1000);

    return () => clearInterval(interval);

  }, []);



//------------------------------------------------------------------->

 


查看完整回答
反對 回復 2022-11-11
  • 1 回答
  • 0 關注
  • 138 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號