需要帮助来创建蓝牙反应性应用

Question

我能够在设定的超时时间内不断使react-native-push-notification显示通知，并对react-native-beaons-manager范围进行监视并监视信标，但是现在我在尝试制作推送通知时遇到了问题仅在信标范围内时，才在设定的超时时间内不断显示。

这是我的App.js：

import React, {Component} from 'react';
import {StyleSheet, Image, View, AppState, DeviceEventEmitter} from 'react-native';
import {Router, Scene} from "react-native-router-flux";
import AbaLoja from './AbaLoja';
import AbaExp from './AbaExp';
import AbaMaps from './AbaMaps';
import AbaSocial from './AbaSocial';
import AbaCupom from './AbaCupom';
import Beacons from 'react-native-beacons-manager';
import PushNotification from 'react-native-push-notification';
function CustomIcon(icon) {
    return (
        <View>
            <Image
                source={icon.src}
                style={{ width: 22, height: 22 }}
            />
        </View>
    );
}


// #region constants
const IDENTIFIER = '123456';
const UUID = 'e503243c-75e7-4274-a666-fe07b9e78753';
const RANGING_SECTION_ID = 1;

let throttle = require('lodash.throttle');

export default class App extends Component<Props, State> {

    isSendingNotifications = null;

    constructor(props) {
        super(props);
        this.state = {
            uuid: UUID,
            identifier: IDENTIFIER,
            beacons: [{ key: 1, data: [], sectionId: RANGING_SECTION_ID }]
        };
        this.sendNotifications = this.sendNotifications.bind(this);
    }

    // #region lifecycle methods
    async componentDidMount() {
        // Tells the library to detect iBeacons
        Beacons.detectIBeacons();
        await Beacons.startRangingBeaconsInRegion({identifier: IDENTIFIER, uuid: UUID})
            .then(() => console.log('Beacons ranging started succesfully'))
            .catch(error => console.log(`Beacons ranging not started, error: ${error}`));

        await Beacons.startMonitoringForRegion({identifier: IDENTIFIER, uuid: UUID})
            .then(() => console.log('Beacons monitoring started succesfully'))
            .catch(error => console.log(`Beacons monitoring not started, error: ${error}`));

        DeviceEventEmitter.addListener(
            'beaconsDidRange',
            throttle((response: {
                    beacons: Array<{
                        distance: number,
                        proximity: string,
                        rssi: string,
                        uuid: string,
                    }>,
                    uuid: string,
                    identifier: string,
                }) => {
                    if(response.uuid === UUID){
                        PushNotification.localNotification({
                            title: 'Conheça a Blulivro',
                            message: 'Confira as ofertas perto de você!',
                        });
                    }
                },
                7000)
        );

        DeviceEventEmitter.addListener(
            'regionDidExit',
            ({ identifier, uuid}) => {
                console.log('regionDidExit: ', { identifier, uuid});
                this.removeNotifications;
            },
        );
    }

    removeNotifications(){
        if(this.isSendingNotifications !== null){
            this.isSendingNotifications.remove();
        }
    }

    sendNotifications() {
        PushNotification.localNotification({
            title: 'Conheça a Blulivro',
            message: 'Confira as ofertas perto de você!'
        })
    };


    render() {
        return (

                <Router style={styles.container}>
                    <Scene key="root" style={{backgroundColor: '#EEEEEE', fontSize: 4}}>
                        <Scene key="tabbar" tabs={true} tabBarStyle={{backgroundColor:'#FFFFFF'}} hideNavBar>
                            <Scene key="AbaSocial" component={AbaSocial} title="Social" src={require("./images/Social.png")} icon={CustomIcon}/>
                            <Scene key="AbaCupom" component={AbaCupom} title="Publicupom" initial src={require("./images/Publicupom.png")} icon={CustomIcon}/>
                            <Scene key="AbaLoja" component={AbaLoja} title="Loja Virtual" src={require("./images/Loja_Virtual.png")} icon={CustomIcon}/>
                            <Scene key="AbaExp" component={AbaExp} title="Experiência"  src={require("./images/Experiência.png")} icon={CustomIcon}/>
                            <Scene key="AbaMaps" component={AbaMaps} title="Onde Estamos" titleStyle={{fontSize: 4}} src={require("./images/Maps.png")} icon={CustomIcon}/>
                        </Scene>
                    </Scene>
                </Router>

        );

    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
      textAlign: 'center',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});