React Native：嵌套组件场景下通过Route传递分类ID至目标页面

要实现点击分类卡片时传递对应分类的ID到MealsOverView页面，需要逐层修改组件的 onPress 逻辑，把当前点击项的ID传递下去，具体步骤如下：

1. 修改分类卡片组件 DormeeelGridCard #

让Pressable的点击事件触发时，把当前分类的ID传给父组件的onPress方法：

function DormeeelGridCard({item, onPress}) {
  return (
    <View style={[styles.gridcard, {backgroundColor: item.color}]}>
      <Pressable
        style={({pressed}) => [
          styles.button,
          pressed ? styles.buttonpressed : null,
        ]}
        onPress={() => onPress(item.id)} // 传入当前点击分类的ID
      >
        <View style={styles.innercontainer}>
          <Text style={styles.gridtext}>{item.title}</Text>
        </View>
      </Pressable>
    </View>
  );
}

2. 修改FlatlistDormeel组件 #

直接透传onPress方法给卡片组件，确保每个卡片能把自身ID传递出去：

function FlatlistDormeel({data, onPress}) {
  function renderCategoryItem({item}) {
    return <DormeeelGridCard item={item} onPress={onPress} />; // 透传点击事件
  }
  return (
    <View style={styles.catgridcontainer}>
      <FlatList
        data={data}
        renderItem={renderCategoryItem}
        keyExtractor={item => item.id}
        numColumns={2}
      />
    </View>
  );
}

3. 修改CategoriesScreen组件 #

更新点击处理函数，接收分类ID并通过导航传递给目标页面：

import React from 'react';
import {View, StyleSheet} from 'react-native';
import FlatlistDormeel from '../components/FlatlistDormeel';
import {CATEGORIES} from '../data/dummy-data';

function CategoriesScreen({navigation}) {
  // 接收点击传来的分类ID
  function onPressHandler(categoryId) {
    navigation.navigate('MealsOverviewScreen', {
      categoryId: categoryId, // 传递目标分类ID
    });
  }
  return (
    <View>
      <FlatlistDormeel
        style={styles.catcontainer}
        data={CATEGORIES}
        onPress={onPressHandler}
      />
    </View>
  );
}
export default CategoriesScreen;

const styles = StyleSheet.create({
  catcontainer: {
    flex: 1,
  },
});

4. 修改MealsOverView页面 #

接收传递的分类ID，还可以根据ID筛选出对应分类的详细信息：

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {useRoute} from '@react-navigation/native';
import {CATEGORIES} from '../data/dummy-data'; // 引入分类数据

function MealsOverView() {
  const route = useRoute();
  const categoryId = route.params?.categoryId; // 获取传递的分类ID
  // 根据ID匹配对应的分类信息
  const selectedCategory = CATEGORIES.find(cat => cat.id === categoryId);

  return (
    <View style={styles.container}> {/* 修正原代码的styles拼写错误 */}
      <Text>当前分类：{selectedCategory?.title}</Text>
      <Text>分类ID：{categoryId}</Text>
    </View>
  );
}
export default MealsOverView;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

内容的提问来源于stack exchange，提问作者Krishna Gaurav