javascript - React Native Drawer Navigation - 如何为同一屏幕获得不同的渲染？

Question

我一直在尝试让我的抽屉导航指向同一屏幕上的不同渲染，具体取决于按下的按钮（Nibbles、Starters、Mains 或 Desserts）。正如您在下面的代码中看到的，这些都指向同一个 IndividualCourse.js；我的想法是我只想要一个屏幕来呈现 Nibbles 或 Starters 等......在有条件的情况下。但是如何通过抽屉式导航获得 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>
);

要显示的数据是从外部 Mongo DB 调用的，如果我按下 Nibbles Drawer 按钮，它将调用 apiData.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>
  );
}

对此的任何帮助将不胜感激。

标签： javascriptreact-nativenavigation-drawerrenderconditional-rendering