如何使用 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}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）