我正在尝试使用react原生后台计时器来生成一个用户可以控制的屏幕计时器。如果有人理解为什么会出现这种错误,我将非常感谢您的帮助!
这是我实现计时器的屏幕:
import * as React from 'react';
import {Button, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
import styled from 'styled-components'
import colours from '../components/Colours';
import * as Font from 'expo-font';
import BackgroundTimer from 'react-native-background-timer';
import Sound from 'react-native-sound';
export default class MindfulnessScreen extends React.Component {
state={
fontLoaded:false,
}
async componentDidMount() {
await Font.loadAsync({
'montserrat-regular': require('../assets/fonts/Montserrat/Montserrat-Regular.ttf'),
'montserrat-light': require('../assets/fonts/Montserrat/Montserrat-Light.ttf'),
'montserrat-semibold': require('../assets/fonts/Montserrat/Montserrat-SemiBold.ttf'),
'montserrat-bold': require('../assets/fonts/Montserrat/Montserrat-Bold.ttf'),
'MontserratBold': require('../assets/fonts/Montserrat/Montserrat-Bold.ttf'),
'MontserratSemibold': require('../assets/fonts/Montserrat/Montserrat-SemiBold.ttf'),
'MontserratRegular': require('../assets/fonts/Montserrat/Montserrat-Regular.ttf'),
'MontserratLight': require('../assets/fonts/Montserrat/Montserrat-Light.ttf'),
});
this.setState({ fontLoaded:true});
}
constructor(props) {
super(props)
this.state = {
text:'10:00',
sessionInProgress: false
}
}
resetTimer () {
this.setState({
text: '10:00',
sessionInProgress: false
})
BackgroundTimer.stopBackgroundTimer();
}
startTimer () {
let seconds = 60*10
let seconds = 60*10
BackgroundTimer.runBackgroundTimer(() => {
let secondHand = currSeconds % 60
secondHand = (secondHand === 0) ? '00' : secondHand
secondHand = (secondHand !== '00' && secondHand < 10) ? `0${secondHand}` : secondHand
let displayTimer = `${Math.floor(currSeconds/60)}:${secondHand}`
this.setState({
text: displayTimer
})
if (currSeconds === 0) {
this.stopSession()
}
currSeconds--
}, 1000)
}
beginSession = () => {
this.startTimer()
this.setState({
sessionInProgress: true
})
}
stopSession = () => {
this.resetTimer()
this.setState({
sessionInProgress:false
})
}
render() {
return (
<Container>
<Titlebar>
<Title>Mindfulness</Title>
</Titlebar>
<Scroll>
<HeaderBar>
<Details>Paying more attention to the present moment – to your own thoughts and feelings, and to the world around you – can improve your mental wellbeing.</Details>
<Details>Mindfulness meditation involves sitting silently and paying attention to thoughts, sounds, the sensations of breathing or parts of the body, bringing your attention back whenever the mind starts to wander.</Details>
</HeaderBar>
<HeaderBar>
<Header>this.state.text</Header>
</HeaderBar>
<HeaderBar>
{ !this.state.sessionInProgress &&
<TouchableOpacity onPress={this.beginSession}>
<Header2>Begin Session</Header2>
</TouchableOpacity>
}
{ !this.state.sessionInProgress &&
<TouchableOpacity onPress={this.stopSession}>
<Header3>Stop</Header3>
</TouchableOpacity>
}
</HeaderBar>
</Scroll>
</Container>
);
}
}
错误如下:
Identifier 'seconds' has already been declared (45:8)
因此,它指向读取let seconds = 60*10
的其中一行
当我删除其中一个声明时,我会得到一个新的错误,它指出:
Invariant Violation: Native module cannot be null.
感谢您的阅读,我是一个反应迟钝的本地人,所以为愚蠢的错误道歉!
您是否将项目从expo中弹出?
"react native background timer"似乎无法使用expo管理的工作流运行(需要编译本机代码(。
无论如何,您应该看看Expo BackgroundFetch:https://docs.expo.io/versions/latest/sdk/background-fetch/