reactjs - react native 显示当前时间并实时更新秒数

标签 reactjs timer react-native clock

我想在 react native 应用程序中像时钟一样显示当前时间(MM/DD/YY hh:mm:ss),并每秒更新一次,我尝试使用 new Date() 并将其设置为状态,但是除非我刷新页面,否则时间不会更新。 我还尝试在 render() 中使用 setInterval 函数,它确实得到了更新,但对 CPU 来说很昂贵。有没有好的方法实现该功能?

state = {
    curTime: null,
}
render(){
    setInterval(function(){this.setState({curTime: new  Date().toLocaleString()});}.bind(this), 1000);
    return (
        <View>
            <Text style={headerStyle.marginBottom15}>Date: {this.state.curTime}</Text>
        </View>
    );
}

最佳答案

只需将 setInterval 移至 componentDidMount 函数即可。

像这样:

  componentDidMount() {
    setInterval(() => {
      this.setState({
        curTime : new Date().toLocaleString()
      })
    }, 1000)
  }

这将改变状态并每 1 秒更新一次。

关于reactjs - react native 显示当前时间并实时更新秒数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41294576/

相关文章:

c# - 我将如何着手实现不同速度的秒表?

react-native - Jest Redux 持久化 : TypeError: Cannot read property 'catch' of undefined at writeStagedState

android - 如何选择一段时间而不是特定时间 React Native

javascript - react 表单无法识别键入的输入

reactjs - 如何从 redux-persist 中移除一个 reducer

actionscript-3 - 如何延迟while循环?

javascript - 如何制作与计时器一起使用的交互式向后进度条?

javascript - react native 推送通知声音

javascript - 使用 reactjs 和 rails Assets 管道的最佳方式是什么?

css - 如何将字体添加到基于 create-react-app 的元素?