从组件React本机动态更改底部选项卡导航器数据

Question

基本上，我的想法是在底部选项卡导航器中显示通知计数，如下图所示

​

现在我静态地显示这些数字，并且我已经创建了一个图标组件来帮助我将count number作为props参数插入，这是我的导航文件：

const mainStack = createStackNavigator(
{
    Home,
    NewPost,
    PostDetail
},
{
    defaultNavigationOptions: defaultNavigationOptions,
    headerBackTitleVisible: false
}
);

const mainTab = createBottomTabNavigator(
{
    Home: mainStack,  
    Invitations: Invitations,  
    Messages: Messages,
    Notifications: Notifications,  
    Cards: Cards,  
},
{
    defaultNavigationOptions: ({ navigation, screenProps }) => ({
        tabBarIcon: ({ focused, horizontal, tintColor }) => {
          const { routeName } = navigation.state;
          let iconName;
          if (routeName === 'Home') {
            iconName = focused ? 'home': 'home-outline';
          } else if (routeName === 'Invitations') {
            iconName = focused ? 'people' : 'people-outline';
          }else if (routeName === 'Messages'){
            iconName = focused ? 'chatbubbles' : 'chatbubbles-outline';
          }else if (routeName === 'Notifications'){
            iconName = focused ? 'notifications' : 'notifications-outline';
          }else if (routeName === 'Cards'){
            return  <FontAwesome5 name={"id-card"} size={24} color={colors.GREEN} solid={iconName = focused}/>
          }
          // You can return any component that you like here!
          return <TabIcon iconName={iconName} data={screenProps} count='3'/>;
        },
    }),
    headerBackTitleVisible: false,
}
);

  const switcher = createSwitchNavigator(
      {
          Reception: Reception,
          Auth: authStack,
          Main: mainTab,
      },
      {
       initialRouteName: 'Reception',
       defaultNavigationOptions: defaultNavigationOptions
     }
   );



  export default createAppContainer(switcher);

然后我在我的主index.js中调用这个导航器，如下所示：

const AppWrapper = () => {
   return <Root><Navigation /></Root>
}

AppRegistry.registerComponent(name, () => AppWrapper);

我确实有一个获取所有通知计数的后端终结点，我真的很困惑，虽然我真的很困惑在哪里以及何时调用它，我试图在我的家庭组件挂载时调用它( bcz它基本上是应用程序打开时挂载的第一个组件)

所以在我的家庭组件中，我这样做了

componentDidMount() {
    this.loadStats();
}

loadStats = async () => {
    let stats = await getStats();
}

然后，我真的不知道如何将此统计信息从我的主组件传递到导航器，最后到达我的tabIcon组件。有没有内置的函数呢？另外，我有一个套接字连接，所以这个计数可以实时改变，有没有好的方法呢?？

Answer 1

如果有更多的代码可用来查看如何解决您的问题，这将是非常方便的。有了这些建议，我可以给出一些建议：

1. 您需要将统计数据存储在locaState中：

loadStats = async () => { const stats =等待getStats()；this.setState({ stats })；};

1. 您需要将状态向下传递给您的导航器组件。！我不知道你的Navigator组件在哪里，但如果它在你的Home组件中，你需要这样做：

render() { return ( <> )}

1. 在导航器组件中，您需要从道具中获取统计信息，并将其传递给TabIcon组件

render() { return ( <> )}

我希望这能帮到你。通常，您需要查看状态管理中的React，以了解如何执行这些操作