如何动态创建Stack.Screen？-我无法导航到动态创建的屏幕

Question

我有一个对象，我正试图循环通过它来动态创建屏幕。我有一个抽屉，其中包含一个项目列表，每个项目都有一个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>
  );
}

预先感谢您的帮助

Answer 1

您忘记添加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组件的方式创建实际的屏幕组件。因此，在您的项目中必须存在一个名为LemonBar的JSX组件，该组件也被导入到您的抽屉初始化的文件中。

从这个意义上说，不存在“从组件的角度动态创建屏幕”。如果组件是导入的并存在于您的项目中，那么您可以使用上面的片段将它们作为屏幕添加到抽屉导航器中。

Answer 2

您肯定可以动态创建屏幕，但是您有两个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中嵌套.map将返回一个屏幕数组。使用.reduce在这里有一个平面的屏幕数组)

Answer 3

我认为我们必须为onPress传递相应屏幕的id或链接。