Question

这个问题我以前曾问过，但由于仍未得到回答，我再次尝试运气。我对此无法获得任何解决方案。基本上，我希望标签导航器使用axios api调用响应来动态输出导航。所以我想将json响应动态添加到导航中。我在原始存储库上问了这个问题（其他人也这样做了），并得到了答复，以提出关于stackoverflow的问题。

我正在使用标签导航器显示一些“类别”项目。基本思想是能够从API调用中获取那些类别项。我有一个单独的文件“ tabNavigator”，用于处理标签导航。该文件的外观如下：

import { createMaterialTopTabNavigator, createAppContainer, createBottomTabNavigator, MaterialTopTabBar } from 'react-navigation';
import Category from '../Screens/Category'
import React from 'react';

const TabNavigator = createMaterialTopTabNavigator({
    Pizza: {screen: Category, params: {categoryID: 1004}},
    Wine: {screen: Category, params: {categoryID: 1003}}
  },
  {
    initialRouteName:'Pizza',
    lazy: true,
    tabBarOptions: {
      activeColor: '#f0edf6',
      indicatorStyle: {
        backgroundColor: '#ff4136',
      },
      labelStyle: {
        fontSize: 16,
        fontFamily: 'LoraRegular',
      },
      barStyle: { backgroundColor: '#694fad' },
      style: {
        backgroundColor: '#2a292d',
      },
    }
  },
);

export default createAppContainer(TabNavigator);

所以我想做的就是迭代Pizza: {screen: Category, params:{categoryID: 1004}},，Pizza是其中的一种。因此，假设我有一个像这样的axios数据：

constructor(props) {
  super(props);

  this.state = {
    categories: []
  };
}

getData() {
  const categoryID = this.props.navigation.getParam('categoryID', '404');

  axios.get('http://test.io/category/' + categoryID)
    .then(response => {
      this.setState({categories: response.data.category});       
    })
    .catch(error => {
      //log error
    })
}

因此，假设我有上面的代码，如何使用该代码将类别迭代到标签导航器的类别中？以及如何在现有的标签导航器文件中使用它。谢谢！

创建动态TabNavigation

0 个答案: