Как передать переменную из индекса. js в дочерний экран в стеке вкладок?

Question

Я создаю приложение в React Native, которое использует маяки Bluetooth (от Estimote), чтобы уведомлять пользователя, когда они находятся рядом с интересующей точкой. Он отправит уведомление на пользовательское устройство и при открытии выведет пользователя на экран, который отображает список близлежащих достопримечательностей.

Документация Estimote рекомендует запускать наблюдатель маяка в индексе. js, чтобы он был на максимально возможном уровне и работал, даже если приложение свернуто / закрыто.

Я использую React Navigation v5, и мне очень трудно понять, как получить данные из индекса. js передается через компонент приложения и навигаторы Tab и Stack, которые я использовал для разделения своих экраны.

Может кто-нибудь сказать мне, что лучший подход здесь?

Вот упрощенная версия соответствующей структуры приложения:

index. js

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

import { startProximityObserver, stopProximityObserver } from './proximityObserver'

startProximityObserver()

бесконтактный сервер. js

import * as RNEP from "@estimote/react-native-proximity"

const config = require('./config.json')

const startProximityObserver = () => {
  let beaconsInRange = []

  /* code to update beaconsInRange array when a beacon enters or leaves range */
}
const stopProximityObserver = () => { RNEP.proximityObserver.stopObservingZones() }

export { startProximityObserver, stopProximityObserver }

Приложение. js

const Tab = createBottomTabNavigator()

const App = () => {
  return(
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name = "Home"
          component = { HomeStack }
        />
        <Tab.Screen
          name = "Beacons"
          component = { BeaconStack }
        />
      </Tab.Navigator>
    </NavigationContainer>
  )
}

BeaconStack. js

const BeaconStackNav = createStackNavigator()

const BeaconStack = () => {
  return(
    <BeaconStackNav.Navigator>
      <BeaconStackNav.Screen
        name = "Beacons Screen"
        component = { BeaconScreen }
      />
    </BeaconStackNav.Navigator>
  )
}

BeaconScreen. js

const BeaconScreen = () => {
  return(
    <FlatList
      /* Where I would like to use the data (beaconsInRange) from proximityObserver */
    />
  )
}