如何使用 react-native-tab-view 创建动态/可更新路由？

如何解决如何使用 react-native-tab-view 创建动态/可更新路由？

我有以下组件。创建初始标签集非常有效。

import * as React from 'react';
import { TabBar,TabView } from 'react-native-tab-view';
import { CollectionList } from './components';

const renderTabBar = (props) => <TabBar {...props} scrollEnabled />;

const RarityTabs = ({ collectionId,rarities }) => {
  const rarityRoutes = rarities.map((rarity) => ({
    key: rarity.variant,title: rarity.quality,rarity,}));

  const [index,setIndex] = React.useState(0);
  const [routes,setRoutes] = React.useState(rarityRoutes);

  return (
    <TabView
      lazy
      navigationState={{ index,routes }}
      renderScene={({ route }) => (
        <CollectionList collectionId={collectionId} selectedRarity={route.rarity} />
      )}
      renderTabBar={renderTabBar}
      onIndexChange={setIndex}
    />
  );
};

export default RarityTabs;

但是，rarities 可以更改，我想让 Tab 路由创建做出相应的响应。
当我尝试 useEffect 触发 setRoutes 时，它会锁定应用程序。

您如何创建一种动态路由方式？谢谢！

_{Also posted on GitHub}