如何将变量从index.js传递到选项卡导航堆栈中的子屏幕?

时间:2020-03-23 21:26:15

标签: react-native react-navigation

我正在React Native中创建一个应用程序,该应用程序使用蓝牙信标(来自Estimote)来通知用户附近的兴趣点。它将向用户设备发送通知,打开时将用户带到显示附近兴趣点列表的屏幕。

Estimote的文档建议在index.js中启动信标观察器,以使其处于尽可能高的级别,并且即使最小化/关闭应用程序也可以运行。

我正在使用React Navigation v5,并且很难弄清楚如何从通过App组件以及用于分隔屏幕的Tab和Stack导航器向下传递的index.js获取数据。

有人可以告诉我最好的方法是什么吗?

这是相关应用程序结构的简化版本:

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()

proximityObserver.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 }

App.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 */
    />
  )
}

0 个答案:

没有答案