我有以下组件。创建初始选项卡集非常有用。
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
可以更改,我想让选项卡路由创建相应地响应。
当我尝试useEffect
触发setRoutes
时,它会锁定应用程序。
您如何为路线动态创建一种方式?谢谢!