时间戳

首页 > 解决方案 > 如何根据从 API 获取的数据在 React Navigation 中创建或删除选项卡？

react-native - 如何根据从 API 获取的数据在 React Navigation 中创建或删除选项卡？

问题描述

假设有一个选项卡视图，其中包含名称为面包、比萨饼、饮料、甜点、奶昔的选项卡。这些选项卡的名称是从 API 中获取的。此外，每个选项卡在各自屏幕上显示的信息也是从 API 中获取的。现在，当 Tab 的数据之一从 API 中删除时。我也希望将其从选项卡视图中删除。

如何在 React Navigation 中实现这一点？

标签： react-nativereact-native-androidreact-navigationreact-native-iosreact-navigation-stack

解决方案

在反应导航中，我们不能有动态选项卡，因为我们必须提前静态定义好所有路由。

我们也有这样的要求，所以我们遵循了下面提到的方法。

  1. 静态定义所有可能的选项卡并使选项卡不可见。
const MainNav = createBottomTabNavigator(
  {
    Breads: { screen: BreadsStackNavigation },
    Pizzas: { screen: PizzasStackNavigation },
    Beverages: { screen: BeveragesStackNavigation },
    Desserts: { screen: DessertsStackNavigation },
    Shakes: { screen: ShakesStackNavigation }
  },
  {
    initialRouteName: 'HomeStackNavigation',
    defaultNavigationOptions: {
      tabBarVisible: false,
    },
    swipeEnabled: false,
    navigationOptions: {
      header: props => <HeaderView
        navigation={props.navigation}
      />,
      tabBarVisible: false
    }
  }
);
  1. 在 HeaderView 中，componentWillReceiveProps检查来自服务器的响应并相应地动态创建选项卡（可能是通过根据响应动态添加按钮）。

更新

我正在考虑另一种方法。

正如此链接中给出的，我们可以创建自己的自定义导航器，并在从 API 调用获得响应后动态填充父自定义导航器中的选项卡。我没有相同的确切代码，但您可以尝试这种方法。

推荐阅读