Javascript React本机抽屉导航-如何为同一屏幕获得不同的渲染？

我一直在尝试让我的抽屉导航指向同一屏幕上的不同渲染，这取决于按下的按钮（小口、启动器、电源或甜点）。正如您在下面的代码中看到的，这些都指向同一个IndividualCourse.js； 我的想法是，我只想要一个屏幕，将呈现或啃咬或初学者等。。。有条件地。但是你如何通过抽屉导航获得一个onpress ID呢

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import MainMenu from '../views/MainMenu';
import About from '../views/About';
import IndividualCourse from '../views/IndividualCourse';
import AddActivity from '../views/AddActivity';
import IndividualActivity from '../views/IndividualActivity';

const Drawer = createDrawerNavigator();

const HomeNavigator = () => (
  <Drawer.Navigator>
    <Drawer.Screen name="Menu" component={MainMenu} />
    <Drawer.Screen name="About" component={About} />
    <Drawer.Screen name="Nibbles" component={IndividualCourse} />
    <Drawer.Screen name="Starters" component={IndividualCourse} />
    <Drawer.Screen name="Mains" component={IndividualCourse} />
    <Drawer.Screen name="Desserts" component={IndividualCourse} />
    <Drawer.Screen name="Create a Recipe" component={AddActivity} />
  </Drawer.Navigator>
);

export const DrawerNavigator = () => (
  <NavigationContainer>
    <HomeNavigator />
  </NavigationContainer>
);

从“React”导入React；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react导航/drawer'导入{createDrawerNavigator}；
从“../views/MainMenu”导入MainMenu；
从“../views/About”导入关于；
从“../views/IndividualCourse”导入IndividualCourse；
从“../views/AddActivity”导入AddActivity；
从“../views/IndividualActivity”导入IndividualActivity；
const Drawer=createDrawerNavigator（）；
常量HomeNavigator=（）=>(
);
导出常数pawernavigator=（）=>(
);

要显示的数据是从外部Mongo DB调用的，在那里它将调用apiData.Nibbles，如果我按下Nibbles抽屉按钮

import React, { useEffect, useState } from 'react';
import { useNavigation } from '@react-navigation/native';
import {
  StyleSheet, Text, View, Button, Alert, FlatList, ActivityIndicator,
} from 'react-native';
import Header from '../components/Header';
import CourseHeader from '../components/CourseHeader';


function buildItem(item) {
  console.log(item)
  return (
    <View >
      <Text>{item.item.name}</Text>
    </View>
  );
}

export default function IndividualCourse() {
  const navigation = useNavigation();
  const [isLoading, setLoading] = useState(true);
  const [apiData, setApiData] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3000/activities')
      .then((response) => response.json())
      .then((json) => setApiData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  return (
    <View style={styles.container}>
      <Header />
      <CourseHeader />
      <Text>this is where the full list of appetisers could go. a little mini menu. maybe also a blurb about what the appetiser category means in terms of activity size</Text>
      <View style={styles.activityList}>
        <FlatList 
        data={apiData.nibbles}
        renderItem={buildItem}
        keyExtractor={(item) => item._id} 
        />
      </View>
      <Button
        title="Back to the Main Menu"
        onPress={() => navigation.navigate('MainMenu')}
      />
    </View>
  );
}

import React，{useffect，useState}来自“React”；
从'@react-navigation/native'导入{useNavigation}；
进口{
样式表、文本、视图、按钮、警报、平面列表、活动指示器、，
}从“反应本机”；
从“../components/Header”导入标题；
从“../components/CourseHeader”导入CourseHeader；
函数buildItem（项目）{
console.log（项目）
返回(
{item.item.name}
);
}
导出默认函数IndividualCourse（）{
const navigation=useNavigation（）；
const[isLoading，setLoading]=useState（true）；
const[apiData，setApiData]=useState（[]）；
useffect（（）=>{
取（'http://localhost:3000/activities')
.then（（response）=>response.json（））
.然后（（json）=>setApiData（json））
.catch（（错误）=>console.error（错误））
.最后（（）=>setLoading（false））；
}, []);
返回(
这是开胃菜的完整列表。一个小菜单。也许还有一个关于开胃菜类别在活动规模方面的含义的简介
项目.\u id}
/>
导航。导航（'main menu'）}
/>
);
}

在此方面的任何帮助都将不胜感激