Question

将信息从一个屏幕（类别屏幕）传递到另一个屏幕（MealDetailScreen）。两个屏幕都是功能组件。执行onDateChange函数时发生错误。问题是props.navigation.navigate...。

发件人：

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);

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

Answer 1

只需在组件范围内放置onDateChange函数

const CategoriesScreen = props => {

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

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

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

1 个答案: