Javascript 使用从API调用获取的数据更新TabNavigator标签

我有一个应用程序，它有多个堆栈导航器，其中一个里面有一个createMaterialTopTabNavigator，它向我显示了一个列表。现在，对于每个选项卡，我都会获得其中项目的计数，我通过一个单独的API调用获取这些计数（所有选项卡的计数都是通过一个API获取的）。默认情况下，我能够显示静态tabLabel。 我需要做的是显示标签（选项卡标题）中每个选项卡的计数

导航器代码：

从“React”导入React；
从“react native”导入{View}；
从“反应导航”导入{createMaterialTopTabNavigator}；
从“screens/App/SellerListingScreen/SellerListingScreen”导入SellerListingScreen；
const SellerListingNavigator=createMaterialTopTabNavigator(
{
PendingSellers：{
屏幕：（）=>，
导航选项：{
标题：“待定（）
}
},
完整卖方：{
屏幕：（）=>，
导航选项：{
标题：“已完成（）
}
}
},
{
选项卡选项：{
风格：{
背景颜色：“00cc99”
}
},
懒惰：是的
}
);
导出默认SellerListingNavigator；

使用react navigation，navigationOptions可以是当前示例中的静态对象，也可以是获取包含

navigation

对象的对象的函数。在您的情况下，您可以轻松地重写导航选项，如下所示：

({navigation}) => {
  const fetchDone = navigation.getParam('countFetchDone');
  const currentCount = navigation.getParam('count');
  if (!fetchDone) {
    navigation.setParam('countFetchDone', true);
    fetch(YOUR_FETCH_OPTIONS_HERE)
      .then((r) => r.json())
      .then((data) => {
        navigation.setParam('count', data.count);
      });
  }
  if (currentCount !== undefined) {
    return {
      title: 'My list (' + currentCount + ')'
    };
  } else {
    return {
      title 'My list (...)'
    };
  }
}

---

您需要将查询的状态保存为params，以便头正确更新（因为它仅在params更改时更新）

fetchDone

用于确保查询完成一次。

使用react navigation，navigationOptions可以是与当前示例类似的静态对象，也可以是获取包含导航对象的对象的函数。在您的情况下，您可以轻松地重写导航选项，如下所示：

({navigation}) => {
  const fetchDone = navigation.getParam('countFetchDone');
  const currentCount = navigation.getParam('count');
  if (!fetchDone) {
    navigation.setParam('countFetchDone', true);
    fetch(YOUR_FETCH_OPTIONS_HERE)
      .then((r) => r.json())
      .then((data) => {
        navigation.setParam('count', data.count);
      });
  }
  if (currentCount !== undefined) {
    return {
      title: 'My list (' + currentCount + ')'
    };
  } else {
    return {
      title 'My list (...)'
    };
  }
}

---

您需要将查询的状态保存为params，以便头正确更新（因为它仅在params更改时更新）

fetchDone

用于确保查询完成一次。

Ok我通过创建一个自定义的白色导航器来解决这个问题，扩展了我现有的tabNavigator&将所需的参数传递给screenProps

从“React”导入React；
从“反应导航”导入{createMaterialTopTabNavigator}；
//@ts忽略
从“screens/App/SellerListingScreen/SellerListingScreen”导入SellerListingScreen；
//@ts忽略
从“utils/InteractiveAsyncStorage”导入{getItem}；
const SellerListingNavigator=createMaterialTopTabNavigator(
{
PendingSellers：{
屏幕：（）=>，
导航选项：（{screenProps}）=>({
标题：`Pending（${screenProps.Pending}）`
})
},
完整卖方：{
屏幕：（）=>，
导航选项：（{screenProps}）=>({
标题：`已完成（${screenProps.Completed}）`
})
}
},
{
选项卡选项：{
风格：{
背景颜色：“00cc99”
}
},
懒惰：是的
}
);
类customSellerListingNavigator扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={pending:0，completed:0}；
}
静态路由器=SellerListingNavigator.router；
_fetchPickupCounts=async（）=>{
const userData=wait getItem（“userData”）；
常量头={
“内容类型”：“应用程序/json”，
“会话令牌”：userData.sessionToken，
};
const baseUrl=“baseUrl here”；
常量url=`${baseUrl}/pickupCount/`；
返回等待获取（url{
方法：“张贴”，
标题：标题
})
.then（response=>response.json（））
.然后（responseJson=>{
这是我的国家({
待定：responseJson.pending，
已完成：responseJson.completed
});
})
.catch（错误=>{
控制台错误（error）；
});
};
componentDidMount（）{
这个。_fetchPickupCounts（）；
}
render（）{
const{navigation}=this.props；
返回(
);
}
}
导出默认customSellerListingNavigator；

好的，我创建了一个自定义导航器，扩展了我现有的tabNavigator&将所需的参数传递给screenProps，从而解决了这个问题

从“React”导入React；
从“反应导航”导入{createMaterialTopTabNavigator}；
//@ts忽略
从“screens/App/SellerListingScreen/SellerListingScreen”导入SellerListingScreen；
//@ts忽略
从“utils/InteractiveAsyncStorage”导入{getItem}；
const SellerListingNavigator=createMaterialTopTabNavigator(
{
PendingSellers：{
屏幕：（）=>，
导航选项：（{screenProps}）=>({
标题：`Pending（${screenProps.Pending}）`
})
},
完整卖方：{
屏幕：（）=>，
导航选项：（{screenProps}）=>({
标题：`已完成（${screenProps.Completed}）`
})
}
},
{
选项卡选项：{
风格：{
背景颜色：“00cc99”
}
},
懒惰：是的
}
);
类customSellerListingNavigator扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={pending:0，completed:0}；
}
静态路由器=SellerListingNavigator.router；
_fetchPickupCounts=async（）=>{
const userData=wait getItem（“userData”）；
常量头={
“内容类型”：“应用程序/json”，
“会话令牌”：userData.sessionToken，
};
const baseUrl=“baseUrl here”；
常量url=`${baseUrl}/pickupCount/`；
返回等待获取（url{
方法：“张贴”，
标题：标题
})
.then（response=>response.json（））
.然后（responseJson=>{
这是我的国家({
待定：responseJson.pending，
已完成：responseJson.completed
});
})
.catch（错误=>{
控制台错误（error）；
});
};
componentDidMount（）{
这个。_fetchPickupCounts（）；
}
render（）{
const{navigation}=this.props；
返回(
);
}
}
导出默认customSellerList