将数据传递到未聚焦的屏幕，以响应应用程序加载时的本机反应

Question

我有一个带有4个屏幕的底部标签导航器。屏幕之一是“警报”屏幕，该屏幕将在图标上带有徽章，以显示用户收到的警报数量。我知道是超级原创。令人惊讶的是，我在这里找不到任何有关此的信息。我在哪里调用获取函数来获取该号码？我正在尝试找出当用户打开应用程序/在主屏幕上时如何将该号码显示到警报屏幕。

在我的SignInScreen中，我从Facebook获取数据，然后导航到主屏幕：

 await fetch(`https://graph.facebook.com/me?fields=email,name&access_token=${token}`).then((response) => response.json()).then((json) => {

          this.props.navigation.navigate('Home',
          {
              UserName : json.name,
              FBID : json.id,
              email : json.email

          });  

在主屏幕上，我在ComponentDidMount上为用户获取数据：

componentDidMount(){

   this.GetDataAndPopulateHomeScreen()

}

这是我MainTabNavigator文件中的相关代码：

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen, 
  },
  config

);

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <MaterialIcons name="home"  color={focused ? "hotpink":"white"} size={32}  />
  ),
};

HomeStack.path = '';


const AlertsStack = createStackNavigator(
  {
    Alerts: AlertsScreen,
  },
  config
);
AlertsStack.navigationOptions = {
  tabBarLabel: 'Alerts',


  ////********NEED TO PUT A BADGE ON THIS ICON HERE with the alert count***********////
  tabBarIcon: ({ focused }) => (
    <MaterialIcons name="notifications-none"  color={focused ? "hotpink":"white"} size={32}  />
  ),
};

AlertsStack.path = '';

const tabNavigator = createBottomTabNavigator({
  HomeStack,
  PostStack,
  AlertsStack,
  SettingsStack,  
}, {
  tabBarOptions: {
    showLabel: false,
      style: {
          backgroundColor: '#1c92d2' // TabBar background
      }
  }
});

tabNavigator.path = '';


export default tabNavigator;

没有什么非同寻常的权利吗？对于某人来说，这应该是超级简单的观点。 我试过在MainTabNavigator文件中调用该函数。我真的不知道该如何解决。关于如何在单击按钮时传递数据有很多文档，但是如果我尝试将数据传递给未聚焦的屏幕该怎么办？你们是怎么做到的？

谢谢。

这是我在主屏幕上的应用程序，我需要在警报图标上看到数字徽章：