React native 反应导航5如何映射抽屉堆栈屏幕？

我正在尝试制作一个动态抽屉，我的StackItens（路线）设置如下：

import React from 'react';
import Home from '../screens/home/Index';
import ATR from '../screens/atr/Index';

const stackNavigItems = [
  {
    group: 'Home',
    name: 'Home',
    component: Home,
    icon: 'home',
    iconType: 'FontAwesome',
    label: 'Principal',
    hideMenu: false,
    screenComponent: props => {
      return <Home {...props} />;
    },
  },
  {
    group: 'Home',
    name: 'ATR',
    component: ATR,
    icon: 'book',
    iconType: 'Ionicons',
    label: 'ATR',
    hideMenu: false,
    screenComponent: props => {
      return <ATR {...props} />;
    },
  },
];

export {stackNavigItems};

从“React”导入React；
从“../screens/Home/Index”导入主页；
从“../screens/ATR/Index”导入ATR；
常量stackNavigItems=[
{
小组:"家",，
姓名：'家'，
组成部分：家庭，
图标：“家”，
我键入：“真棒”，
标签：'主体'，
希德蒙：错，
屏幕组件：道具=>{
返回；
},
},
{
小组:"家",，
名称：“ATR”，
组成部分：ATR，
图标：“书”，
IonType:“Ionicons”，
标签：“ATR”，
希德蒙：错，
屏幕组件：道具=>{
返回

我尝试了很多方法来传递函数“（）”在组件运行之前，什么都没有。如果我禁用警告，应用程序将在不显示警告的情况下运行，但有时在使用图片中的like时标题的大小会增加一倍。
您可以通过创建一个额外的组件并正常传递该组件，然后通过
initi传递导航项的
id
，来避免使用内联函数alParams
到额外组件：

const StackNavigator = ({route}) => {
  const navigationItem = stackNavigItems[route.params?.navigationItemId];
  return (
    <Stack.Navigator initialRouteName="Home" headerMode="screen">
      <Stack.Screen
        name={navigationItem.name}
        component={navigationItem.screenComponent}
        options={{
          title: navigationItem.label,
          headerLeft: () => null,
        }}
      />
    </Stack.Navigator>
  );
};

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator drawerContent={(props) => null}>
        {stackNavigItems.map((r) => {
          return (
            <Drawer.Screen
              key={r.name}
              name={r.name}
              component={StackNavigator}
              initialParams={{navigationItemId: r.id}}
            />
          );
        })}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

为了让这个例子更具可读性，我省略了一些不相关的代码。
谢谢你的回答，但不是这样。你是我的天使！！！成功！！！非常感谢你的时间和耐心。正如你建议的，我删除了这个问题。
const StackNavigator = ({route}) => {
  const navigationItem = stackNavigItems[route.params?.navigationItemId];
  return (
    <Stack.Navigator initialRouteName="Home" headerMode="screen">
      <Stack.Screen
        name={navigationItem.name}
        component={navigationItem.screenComponent}
        options={{
          title: navigationItem.label,
          headerLeft: () => null,
        }}
      />
    </Stack.Navigator>
  );
};

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator drawerContent={(props) => null}>
        {stackNavigItems.map((r) => {
          return (
            <Drawer.Screen
              key={r.name}
              name={r.name}
              component={StackNavigator}
              initialParams={{navigationItemId: r.id}}
            />
          );
        })}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

const stackNavigItems = [
  {
    id: 0,
    group: 'Home',
    name: 'Home',
    component: Home,
    icon: 'home',
    iconType: 'FontAwesome',
    label: 'Principal',
    hideMenu: false,
    screenComponent: (props) => {
      return <Home {...props} />;
    },
  },
  {
    id: 1,
    group: 'Home',
    name: 'ATR',
    component: ATR,
    icon: 'book',
    iconType: 'Ionicons',
    label: 'ATR',
    hideMenu: false,
    screenComponent: (props) => {
      return <ATR {...props} />;
    },
  },
];