React native 将信息从一个屏幕传递到另一个屏幕（使用功能组件）

将信息从一个屏幕（分类屏幕）传递到另一个屏幕（MealDetailScreen）。两个屏幕都是功能组件。执行onDateChange函数时发生错误。道具。导航。导航。。。线路是问题所在

发件人：

执行onDateChange函数时，会出现以下错误：

---

只需执行此操作，即可在组件范围内启用onDateChange函数

const CategoriesScreen=props=>{
const onDateChange=（onDateChange）=>{
控制台日志（道具）；
props.navigation.navigate({
routeName:“Mealdeail”，
参数：{dateId:onDateChange}
});
};
返回(
);
};
import React from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import CalendarPicker from 'react-native-calendar-picker';

const CategoriesScreen = props => {
  return (
    <View style={styles.container}>
      <CalendarPicker
        onDateChange={onDateChange}
      />
    </View>
  );
};

const onDateChange = (onDateChange) => {
  console.log(props);  
    props.navigation.navigate({
      routeName: 'MealDetail',
      params: { dateId: onDateChange }
    });
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    marginTop: 10,
  },
});

export default CategoriesScreen;

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 date = props.navigation.getParam('dateId');
  return (
      <Text> {date} </Text>
  );
};


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

export default MealDetailScreen;


import { Platform } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import CategoriesScreen from '../screens/CategoriesScreen';
import CategoryMealsScreen from '../screens/CategoryMealsScreen';
import MealDetailScreen from '../screens/MealDetailScreen';
import Colors from '../constants/Colors';

const MealsNavigator = createStackNavigator(
  {
    Categories: {
      screen: CategoriesScreen
    },
    CategoryMeals: {
      screen: CategoryMealsScreen
    },
    MealDetail: MealDetailScreen
  },
  {
    // initialRouteName: 'Categories',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: Platform.OS === 'android' ? Colors.primaryColor : ''
      },
      headerTintColor:
        Platform.OS === 'android' ? 'white' : Colors.primaryColor,
      headerTitle: 'Quick Time'
    }
  }
);

export default createAppContainer(MealsNavigator);