Javascript 如何在以选项卡为中心的事件上调用异步方法？

我正在制作一个应用程序，根据记录的进入时间和退出时间来记录保存时间和到期时间

当前场景：-

• App.js

  用于TabNavigator选项并将默认选项卡设置为Home

• Home.js

  、

  Dues.js

  和

  Savings.js

  分别用于显示选项卡的内容
• 3个选项卡：主页、会费和储蓄
• 主页选项卡：记录进入时间和退出时间
• 会费页签：根据首页页签记录的出入境时间显示到期时间
• 储蓄页签：根据首页页签记录的出入境时间显示储蓄时间

我面临的问题：-

由于我使用

AsyncStorage

在主页选项卡本身设置计算的到期时间或保存的时间项，因此我调用函数

getDueTime（）

在

Dues.js

中的

compoundidimount（）

方法中获取该项，但只作为

compoundimount（）使用一次

方法用于聚焦选项卡，就像选项卡在聚焦时被初始化一样，它将调用

compoundDidMount（）

方法。 但是我想在每次选项卡聚焦时调用function

getDueTime（）

，以便获得实时计算结果

我是

ReactNative

新手，我知道有一个

onNavigationStateChange（）

方法，但我无法使用它。请指导我解决这个问题

App.js

从“React”导入React
从“反应导航”导入{TabNavigator，TabBarTop}
从“./tabs/Home”导入主页
从“./tabs/Dues”导入会费
从“/tabs/Savings”导入节余；
导出默认选项卡导航器(
{
会费：{
屏幕：会费，
导航选项：{
tabBarLabel:“应付款”，
},
},
主页：{
屏幕：主页，
导航选项：{
tabBarLabel:“主页”，
},
},
节省：{
屏幕：节省，
导航选项：{
tabBarLabel:“储蓄”，
},
},
},
{
tabBarComponent:TabBarTop，
initialRouteName:“主页”，
选项卡选项：{
标签样式：{
尺寸：23，
},
风格：{
背景颜色：“#4CAF50”
},
指标类型：{
背景颜色：“白色”
},
InactiveIntColor:“#1A237E”，
大写标签：false
}
}
);您没有真正澄清为什么您不能使用
onNavigationStateChange（）
，因为您应该完全使用它！：）

我可以提出以下建议：
改为采用如下结构：

AppNavigation - rename App to this
App - imports AppNavigation | root of app and state container
  return (
    <View>
      <AppNavigation
        onNavigationStateChange={(prevState, newState) => {
          console.log(newState)
          /** 
            {
              "index":0,
              "routes":[
                {
                  "type":"Navigation/NAVIGATE",
                  "routeName":"Home",
                  "routes":[
                    {
                      "key":"Dues",
                      "routeName":"Dues"
                    },
                    {
                      "key":"Savings",
                      "routeName":"Savings"
                    }
                  ],
                  "index":1,
                  "key":"id-1521725309375-1"
                }
              ]
            }
          **/

          // important is the "index":1
          // it indicates which tab is the currently active one
          // in this case you are currently on the 'Savings' Tab
        }}

      />

    </View>
);

AppNavigation-将应用重命名为此
应用程序-导入AppNavigation |应用程序和状态容器的根
返回(
{
console.log（newState）
/** 
{
“索引”：0，
“路线”：[
{
“类型”：“导航/导航”，
“路由名称”：“主页”，
“路线”：[
{
“关键”：“应付款”，
“路由名称”：“应付款”
},
{
“关键”：“节省”，
“路由名称”：“节省”
}
],
"索引":1,，
“密钥”：“id-1521725309375-1”
}
]
}
**/
//重要的是“指数”：1
//它指示当前活动的选项卡
//在这种情况下，您当前处于“储蓄”选项卡上
}}
/>
);

也不要将您的
TabNavigator
导出为
TabNavigator
已被
react navigation
使用的。只需将其称为
AppNavigator
/
AppNavigation

此外，这种结构有助于使应用程序范围内的样式不受屏幕限制。假设您希望有一个顶部标题，指示错误或警告。您现在可以独立于选项卡/屏幕来显示

希望这对您有所帮助
您能提供示例代码以便每个人都能理解吗？我现在已经提供了示例代码。请您详细说明代码，因为onNavigationStateChange包含两个参数prevState和newState。我也在从我这边尝试。我很快就要解决这个问题了…它必须通过同时使用onNavigationStateChange和NavigationActions.setParams来解决。