我有一個物件，我試圖通過回圈來動態創建螢屏。我有一個抽屜，其中包含一個專案串列，每個專案都有一個 onPress 函式來導航到那些動態創建的螢屏。但是，當我從抽屜中按下一個專案時，什么也沒有發生。我想知道我的回圈是否不正確，但我無法確定原因；如果我使用 console.log，我可以看到創建正確螢屏所需的所有適當資訊。如果我手動創建螢屏，onPress 會導航到相應的螢屏
這是 App.js
const drawerItemsMain = [
{
key: 'Pastry',
title: 'Pastry',
routes: [
{nav: 'MainDrawer', routeName: "LemonBar", title: 'LemonBar'},
],
},
]
const MainDrawerNavigation = () => {
return(
<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent drawerItems={drawerItemsMain} {...props}/>}>
<Drawer.Screen name="Home" component={HomeScreen} />
{
drawerItemsMain.map((item) => {
item.routes.map((route) => {
console.log(route.title)
return (
<Drawer.Screen
key={route.title}
name={route.title}
component={route.routeName}
options={{ title: route.title }}
/>
)
})
})
}
//<Drawer.Screen name="LemonBar" component={LemonBar} /> //this works
</Drawer.Navigator>
)
}
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="MainDrawer" component={MainDrawerNavigation} />
</Stack.Navigator>
</NavigationContainer>
);
}
預先感謝您的任何幫助
uj5u.com熱心網友回復：
我認為你必須為 onPress 傳遞適當螢屏的 id 或鏈接。
uj5u.com熱心網友回復：
您絕對可以動態創建螢屏，但是您有兩個array.map功能，一個回傳螢屏，一個不回傳任何內容。
嘗試
{drawerItemsMain.reduce((res, group) => [
...res,
...(group.routes.map((route) => (
<Drawer.Screen
key={route.title}
name={route.title}
component={route.routeName}
options={{ title: route.title }}
/>
))
],
[], // reducer inital state
)}
（嵌套.map在 a 中.map會回傳一個螢屏陣列。使用.reduce這里有一個平面螢屏陣列）
uj5u.com熱心網友回復：
您忘記添加return宣告。以下解決了該問題。
<Drawer.Navigator drawerItems={drawerItemsMain}>
<Drawer.Screen name="Home" component={HomeScreen} />
{
drawerItemsMain.map((item) => {
return item.routes.map((route) => {
console.log(route.title)
return (
<Drawer.Screen
key={route.title}
name={route.title}
component={route.routeName}
options={{ title: route.title }}
/>
)
})
})
}
</Drawer.Navigator>
還要注意導航框架不會通過 JSX 組件創建實際的螢屏組件。因此，您的專案中必須存在一個名為 JSX 的組件，該組件LemonBar也匯入到初始化抽屜的檔案中。
從這個意義上說，沒有“根據組件動態創建螢屏”。如果組件已匯入并存在于您的專案中，那么您可以使用上面的代碼片段將它們作為螢屏添加到抽屜導航器中。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/477012.html