react-navigation子组件数据到父组件函数[react-navigation 6]

Posted 2023-02-23

【中文标题】react-navigation子组件数据到父组件函数[react-navigation 6]

【英文标题】：react-navigation child component data to parent component function [react-navigation 6]

【发布时间】：2022-01-15 08:23:24

【问题描述】：

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

组件 餐单 餐品 屏幕 类别屏幕 CategoryMealsScreen 膳食详情屏幕 收藏夹屏幕

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

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

CategoryMealsScreen 接收 categoryId

catId = props.route.params.categoryId;

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

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

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

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

错误：当调用以对象为参数的导航时，您需要指定名称或键。用法见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;

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

【参考方案1】：

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

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

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

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

【讨论】：

谢谢，现在它正在我的模拟器上运行