使用 react-native-background-timer 实现计时器，标识符“秒”已被声明

Question

我正在尝试使用 react-native-background-timer 来生成用户可以控制的屏幕计时器。 如果有人了解为什么会发生此错误，我将非常感谢您的帮助！

这是我在其中实现计时器的屏幕：

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.

感谢您的阅读，我对本机反应还很陌生，因此为愚蠢的错误道歉！

Answer 1

您是否从 expo 中弹出项目？

似乎无法使用 expo 托管工作流运行“react-native-background-timer”（需要编译本机代码）。

无论如何，你应该看看 Expo BackgroundFetch: https://docs.expo.io/versions/latest/sdk/background-fetch/