Reagieren Sie native Expo -Hintergrundaufgaben kontinuierlich ⇐ JavaScript

[Guest]

Ich entwickle derzeit eine App, in der ein Benutzer ein Bluetooth -Beacon verbindet. Wenn die Entfernung (RSSI) zu niedrig wird, wird ein Alarm (ein lautes Geräusch spielen) ausgelöst. < /P>
Jetzt habe ich eine Frage zu Hintergrundaufgaben: > Der Benutzer sollte in der Lage sein, sein Telefon zu sperren (einzeln klicken auf die PWR -Schaltfläche). Dann sollte die App weiterhin prüfen, ob das RSSI zu niedrig ist und den Ton abspielen wird, wenn er ausgelöst wird. Reagieren Sie vor ein paar Wochen, also freue ich mich über jede Hilfe ^^ < /p>
Hier ist mein Code bisher: < /p>

Code: Select all

import React, { useState, useEffect } from "react";
import { SafeAreaView, StyleSheet, Text, TouchableOpacity, View, Image, Alert } from "react-native";
import useBLE from "./useBLE";
import Slider from "@react-native-community/slider";
import { LinearGradient } from 'expo-linear-gradient';
import CheckBox from '@react-native-community/checkbox';
import useAudioPlayer from './useAudioPlayer';
import useLocation from "./useLocation";

const audioSource = require('./img/alert.mp3');

const HomeScreen = () => {
const { playSound, stopSound } = useAudioPlayer(audioSource);
let { location } = useLocation();
const {
requestPermissions,
scanForPeripherals,
stopScan,
setConnectedDevice,
setDeviceSearching,
connectedDevice,
deviceSearching,
rssi,
} = useBLE();
const [rssiAlert, setRssiAlert] = useState(false);
const [countdown, setCountdown] = useState(null);
const [startCountdown, setStartCountdown] = useState(false);
const [rssiTreshold, setRssiTrheshold] = useState(-70);
const [showMetaData, setShowMetaData] = useState(false);

useEffect(() => {
if (rssi < rssiTreshold) {
setStartCountdown(true);
} else {
setStartCountdown(false);
setRssiAlert(false);
setCountdown(null);
}
}, [rssi, rssiTreshold]);

useEffect(() => {
if (startCountdown) {
setCountdown(5);
const interval = setInterval(() => {
setCountdown((prev) => {
if (prev !== null && prev > 0) {
return prev - 1;
} else {
clearInterval(interval);
setRssiAlert(true);
playSound();
console.log(location);
return null;
}
});
}, 1000);

return () => clearInterval(interval);
}
}, [startCountdown]);

const handleScan = async () => {
const isPermissionsEnabled = await requestPermissions();
if (isPermissionsEnabled) {
scanForPeripherals();
}
};

const getBarColor = () => {
if (rssi >= -50) return "green";
if (rssi >= -70) return "yellow";
return "red";
};

const resetApp = () => {
stopScan();
setConnectedDevice(null);
setStartCountdown(false);
setRssiAlert(false);
setDeviceSearching(false);
stopSound();
}

return (



{connectedDevice ? (

Beacon verbunden!
Du reitest jetzt sicher!

{rssiAlert ? 
: ()}

{showMetaData ? (
RSSI: {rssi}


Schwellenwert: {rssiTreshold}


{rssi < rssiTreshold && countdown !== null && (
Alarm in {countdown} Sekunden...
)}
) : ()}

{rssiAlert &&  Ein Alarm wurde ausgelöst!}
{location && Deine Koordinaten: {location.coords.latitude}-{location.coords.longitude}}

) : (

Bitte verbinde einen Beacon!

{deviceSearching ? Suche Beacon... : null}

)}




{connectedDevice ? "Abbrechen" : "Beacon suchen"}




Zeige Metadaten?
 setShowMetaData(newValue)}
/>



);
};

const styles = StyleSheet.create({
container: {
flex: 1,
},
connectedBackground: {
backgroundColor: "#90EE90",
},
contentWrapper: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
titleText: {
fontSize: 30,
fontWeight: "bold",
textAlign: "center",
marginHorizontal: 20,
color: "black"
},
titleSubText: {
fontSize: 25,
textAlign: "center",
marginHorizontal: 20,
color: "black"
},
pulse: {
marginTop: 200,
},
unicornImage: {
marginTop: 20,
height: 220,
width: 250
},
rssiText: {
fontSize: 25,
marginTop: 15,
},
alertText: {
fontSize: 20,
color: "red",
marginTop: 10,
},
countdownText: {
fontSize: 18,
color: "orange",
marginTop: 10,
},
rssiBar: {
height: 20,
borderRadius: 10,
marginTop: 10,
width: "50%",
},
sliderLabel: {
fontSize: 18,
marginTop: 20,
},
slider: {
width: 200,
height: 40,
},
ctaButton: {
backgroundColor: "#FF6060",
justifyContent: "center",
alignItems: "center",
height: 50,
marginHorizontal: 20,
marginBottom: 20,
borderRadius: 8,
},
ctaButtonText: {
fontSize: 18,
fontWeight: "bold",
color: "white",
},
metaData: {
justifyContent: "center",
alignItems: "center",
flexDirection: "row"
}
});

export default HomeScreen;
enter code here