Question

我正在使用react-navigation的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不支持动态配置。您需要为此https://blog.expo.io/announcing-react-navigation-5-0-bd9e5d45569e

使用React导航5

在反应导航的createMaterialTopTabNavigator上创建动态选项卡

1 个答案: