React native 堆栈导航器中嵌套的抽屉中的动态项

我真的很难受。 我有一个底部标签宽度4屏幕

BottomTabs.js

export const AllTabs = ({ navigation }) => {
  return (
    <Tab.Navigator initialRouteName="Home" tabBar={props => <BottomNavigation {...props} />}>
        <Tab.Screen name="Home" component={HomeStack} options={{
            icon: 'shopping-store'
        }}/>
        <Tab.Screen name="Catalog" component={CatalogStack} options={{
            icon: 'pulse'
        }}/>
        <Tab.Screen name="Cart" component={CartStack} options={{
            icon: 'shopping-basket'
        }} />
        <Tab.Screen name="Profile" component={ProfileStack} options={{
            icon: 'person'
        }}/>
    </Tab.Navigator>
  )
}

export const AllTabs=（{navigation}）=>{
返回(
}>
)
}

在第一个名为Home的屏幕中，在HomeStack中：

export const HomeStack = () => {
    return (
        <Stack.Navigator screenOptions={screenOptions} >
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="SectionDrawer" component={SectionDrawer} />
            <Stack.Screen name="Detail" component={DetailScreen} />
        </Stack.Navigator>
    )
}

export const HomeStack=（）=>{
返回(
)
}

我在第二个屏幕中调用抽屉组件

抽屉

export const SectionDrawer = (props) => {
    const { route, navigation } = props
    const { list } = route.params
    return (
        <Drawer.Navigator drawerContentOptions={{ activeBackgroundColor: '#5cbbff', activeTintColor: '#ffffff' }} >
            <Drawer.Screen name="Section" component={SectionScreen} options={{ route, navigation }}/>
        </Drawer.Navigator>
    )
}

export const SectionDrawer=（道具）=>{
const{route，navigation}=props
const{list}=route.params
返回(
)
}

最后，在SectionScreen中，我用api按id绑定数据

部分屏幕

export const SectionScreen = (props) => {
    console.log(props);
    const {route, navigation} = props
    const { sectionID } = route.params

    const [isLoading, setLoading] = useState(true);
    const [productList, setProductList] = useState([]);

    useEffect(() => {
        fetch('url, {
            method: 'GET'
        })
            .then((response) => response.json())
            .then((json) => setProductList(json))
            .catch((error) => console.error(error))
            .finally(() => setLoading(false));
    }, []);

    return (
        <Content padder>
            <Text>section screen.</Text>
            <Text>Requested id {sectionID}</Text>
            {isLoading ? (
                <Spinner />
            ) : (
                <ProductCards list={productList} perLine={2} navigation={navigation}/>
            )}
        </Content>
    )
}

export const SectionScreen=（道具）=>{
控制台日志（道具）；
const{route，navigation}=props
const{sectionID}=route.params
const[isLoading，setLoading]=useState（true）；
const[productList，setProductList]=useState（[]）；
useffect（（）=>{
获取（'url{
方法：“获取”
})
.then（（response）=>response.json（））
.然后（（json）=>setProductList（json））
.catch（（错误）=>console.error（错误））
.最后（（）=>setLoading（false））；
}, []);
返回(
部分屏幕。
请求的id{sectionID}
{孤岛加载(
) : (
)}
)
}

I.抽屉中的屏幕采用以下结构：

<CardItem cardBody button onPress={() => {
  navigation.dispatch(
     CommonActions.navigate({
        name: 'SectionDrawer',
        params: {
           screen: 'SectionScreen',
           params: {
              title: card.title,
              sectionID: card.id
           }
         },
      })
    );
}}>

{
导航调度(
通用操作。导航({
名称：'SectionDrawer'，
参数：{
屏幕：“SectionScreen”，
参数：{
标题：卡片，标题，
sectionID:card.id
}
},
})
);
}}>

所有这些工作。。。但我需要将从api获取的动态链接推入抽屉 我受审了：在抽屉里

<Drawer.Navigator drawerContentOptions={{ activeBackgroundColor: '#5cbbff', activeTintColor: '#ffffff' }} >
   {list.map((item, index) => <Drawer.Screen name={item.title} component={SectionScreen}  key={index}/>)}         
</Drawer.Navigator>

{list.map（（项，索引）=>）}

在我调用屏幕的地方：

<CardItem cardBody button onPress={() => {
    navigation.dispatch(
        CommonActions.navigate({
            name: 'SectionDrawer',
            params: {
                list,
                screen: card.title,
                params: {
                    title: card.title,
                    sectionID: card.id
                }
            },
        })
    );
}}>

{
导航调度(
通用操作。导航({
名称：'SectionDrawer'，
参数：{
列表
屏幕：card.title，
参数：{
标题：卡片，标题，
sectionID:card.id
}
},
})
);
}}>

在此之后，我看到我在列表参数中传递的项， 但是，当我尝试导航到它们时，屏幕部分出现错误。route.param.id未定义，route.params也未定义

我还试图获取抽屉中、抽屉组件中所需的数据，并用它来绘制

drawerContent={props=>}

并将其呈现为：

{catalogSections.map（（项目，索引）=>drawerNavigate（导航，项目）}key={index}/>）}

它工作正常，但我无法从中选择活动项

请帮助我如何正确地将项目添加到抽屉，并始终导航到一个具有不同参数的组件