сделать динамическую вкладку на createMaterialTopTabNavigator реагировать-навигации

Question

Я делаю навигатор в верхней вкладке, используя createMaterialTopTabNavigator реагировать на навигацию. Проблема, с которой я столкнулся, заключается в том, что вкладки должны определяться по данным ответа на запрос API. Например, я вызываю API, чтобы запросить список футбольной команды, получить список, а затем установить вкладки MaterialTopTabNvigator.

Я уже делаю метку навигатора, используя компонент, подобный следующему:

class TabBarLabel extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return this.props.focused ? (
      <View style={lstyles.container_focused}>
        <Text style={lstyles.label_focused}>{this.props.name}</Text>
      </View>
    ) : (
      <View style={lstyles.container_blur}>
        <Text style={lstyles.label_blur}>{this.props.name}</Text>
      </View>
    );
  }
}

const FootballTeamNavigator = createMaterialTopTabNavigator(
  {
    teamA : {
      screen: AScreenComponent,
      navigationOptions: () => {
        return {
          title: 'teamA',
          tabBarLabel({focused}) {
            return <TabBarLabel focused={focused} name="teamA" />;
          }
        };
      }
    }
  },
  {
    initialRouteName: teamA,
    swipeEnabled: false,
    timingConfig: {
      duration: 1000,
    },
    tabBarOptions: {
      scrollEnabled: true,
      ...styles,
    },
  },
);

То, что я хочу сделать, похоже на:

let teamList = {};

apiForGetFootballTeamList().then(response => {
  for (const team of response.data.list) {
    tempList[team.name] = team;
  }
});

createMaterialTopTabNavigator(
  {
    ...teamList
  },
  {
    initialRouteName: ...,
    ...
  }
);

Но я неНе знаю, как я могу обновить вкладки, используя данные, такие как компонент. (компонент имеет состояние, и если мы обновляем состояние, компонент обновляется)

Есть ли способ для этого?

Answer 1

Текущие версии React Navigation не поддерживают динамическую настройку. Для этого вам нужно использовать React navigation 5 https://blog.expo.io/announcing-react-navigation-5-0-bd9e5d45569e