react-navigation child 组件数据到 parent 组件函数 [react-navigation 6]

Question

我的 Senario 是我有多个屏幕（CategoriesScreen、CategoryMealsScreen、MealDetailsS​​creen、Favorites Screen）。我想将我的膳食项目外包到一个单独的组件中，并在 CategoryMealsScreen 和 Favorites Screen 中重复使用该组件。

1. 组件
   • 膳食清单
   • 膳食项目
2. 屏幕
   • 类别屏幕
   • CategoryMealsScreen
   • MealDetailsS​​creen
   • 收藏夹屏幕

首先用户在 CategoriesScreen 中选择一个类别然后使用代码

props.navigation.navigate('CategoryMeals', 
                     {categoryId: itemData.item.id}  

CategoryMealsScreen 接收 categoryId

catId = props.route.params.categoryId;

现在我想从 Parent CategoryMealsScreen.js 导航到 child 组件。 代码是否正确？

return <MealList listData={displayedMeals}   navigation = {props.navigation} />;

然后在 MealList 中导航到 MealDetailsS​​creen

onSelectMeal={() => {
              props.navigation.navigate({
                routeName: 'MealDetail',
                params: {
                  mealId: itemData.item.id
                }
              });

错误：使用 object 作为参数调用导航时需要指定名称或键。请参阅 https://reactnavigation.org/docs/navigation-actions#navigate 了解用法 单击 CategoryMealsScreen 后发生错误，无法显示 MealDetailsS​​creen。

---

    import React from 'react';
        
        import { View, Text, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
        
        import { CATEGORIES } from '../data/dummy-data';
        
        import Colors from '../constants/Colors';
        
        import CategoryGridTile from '../components/CategoryGridTile'
        
            const CategoriesScreen = props => 
            {
              const renderGridItem = itemData => {
                return (
                  <CategoryGridTile
                  title={itemData.item.title}
                  color={itemData.item.color}
                  onSelect = {() => {
                    props.navigation.navigate('CategoryMeals', 
                     {categoryId: itemData.item.id} 
                  
                );
              }}
                  />
                );
        
            
          };
          return (
            <FlatList
              keyExtractor={(item, index) => item.id}
              data={CATEGORIES}
              renderItem={renderGridItem}
              numColumns={2}
            />
          );
        };
        
        
        ....
        
        export default CategoriesScreen;

************************************

    import React from 'react';
    
    import {View, Text, Button, FlatList} from 'react-native';
    
    import {CATEGORIES , MEALS} from '../data/dummy-data';
    
    import MealList from '../components/MealList';
    
    
    
    const CategoryMealsScreen = props =>{
        
    
        const  catId = props.route.params.categoryId;
        const displayedMeals = MEALS.filter(meals => meals.categoryIds.indexOf(catId) >= 0 );
        //I think the error is for this line
        return <MealList listData={displayedMeals}   navigation = {props.navigation} />;
    
       
    };
    
    
    
    CategoryMealsScreen.navigationOptions = navigationData => {
      
        const catId = navigationData.navigation.getParam('categoryId');
      
        const selectedCategory = CATEGORIES.find(cat => cat.id === catId);
      
        return {
          headerTitle: selectedCategory.title,
        };
      };
    
    
    export default CategoryMealsScreen
***********************************

    import React from 'react';
    
    import { View, FlatList, StyleSheet } from 'react-native';
    
    import MealItem from './MealItem';
    
    const MealList = props => {
      const renderMealItem = itemData => {
        return (
          <MealItem
            title={itemData.item.title}
            image={itemData.item.imageUrl}
            duration={itemData.item.duration}
            complexity={itemData.item.complexity}
            affordability={itemData.item.affordability}
            onSelectMeal={() => {
              props.navigation.navigate({
                routeName: 'MealDetail',
                params: {
                  mealId: itemData.item.id
                }
              });
            }}
          />
        );
      };
    
      return (
        <View style={styles.list}>
          <FlatList
            data={props.listData}
            keyExtractor={(item, index) => item.id}
            renderItem={renderMealItem}
            style={{ width: '100%' }}
          />
        </View>
      );
    };
    
    const styles = StyleSheet.create({
      list: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 15
      }
    });
    
    export default MealList;
-------------------------------------------------
    import React from 'react';
    import { View, Text, Button, StyleSheet } from 'react-native';
    import { HeaderButtons, Item } from 'react-navigation-header-buttons';
    
    import { MEALS } from '../data/dummy-data';
    import HeaderButton from '../components/HeaderButton';
    
    const MealDetailScreen = props => {
      const mealId = props.route.params.mealId;
    
      const selectedMeal = MEALS.find(meal => meal.id === mealId);
    
      return (
        <View style={styles.screen}>
          <Text>{selectedMeal.title}</Text>
          <Button
            title="Go Back to Categories"
            onPress={() => {
              props.navigation.popToTop();
            }}
          />
        </View>
      );
    };
    
        MealDetailScreen.navigationOptions = navigationData => {
          const mealId = navigationData.navigation.getParam('mealId');
          const selectedMeal = MEALS.find(meal => meal.id === mealId);
          return {
            headerTitle: selectedMeal.title,
            headerRight: (
              <HeaderButtons HeaderButtonComponent={HeaderButton}>
                <Item
                  title="Favorite"
                  iconName="ios-star"
                  onPress={() => {
                    console.log('Mark as favorite!');
                  }}
                />
              </HeaderButtons>
            )
          };
        };
        
        const styles = StyleSheet.create({
          screen: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
          }
        });
        
        export default MealDetailScreen;

如果您有任何想法，请分享。

Answer 1

例如，您有这样的堆栈屏幕。

 <Stack.Screen name="MealDetailsScreen" component={MealDetailsScreen} />

您应该尝试使用屏幕名称进行导航。喜欢，

onSelectMeal={() =>  
              props.navigation.navigate( 
                'MealDetailsScreen',
            {
                  mealId: itemData.item.id
               
       })}