React js 在屏幕之间传递数据，react-native-calendar，导航 route.params

Question

我正在使用 react-native-calendar 模块和导航，我想在单击日期按钮时将 dateString 数据从“CalendarScreen”发送到“MainScreen”。

当我单击任何日期数字按钮时，我收到此错误“TypeError: Cannot read properties of undefined (reading 'params')”。 这是 react-native-calendar 文档：https://github.com/wix/react-native-calendars 我尝试传递与日历模块无关的另一个数据，但它不起作用

我会感谢任何建议

Main.js

import React, { useState } from 'react';
import {viewStyles, textStyles} from './styles';

export default function App({navigation, route}) {
  ...
  const [currentDate, setDate] = useState(route.params.date);
  ...
  return(
    <SafeAreaView>
      ...
      <Text style={textStyles.title}>{currentDate}</Text>
      ...
    <SafeAreaView>
  )

}

日历.js

import React, {Component, useState, useEffect} from 'react';
import { View, StyleSheet, Dimensions} from 'react-native';
import { theme } from "../theme";
import { Calendar, CalndarList, Agenda, LocaleConfig } from "react-native-calendars";
import { images } from '../images';
import IconButton from './IconButton';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { useNavigation } from '@react-navigation/native';

const calendar = () => {

    const navigation = useNavigation();

    return (
        <View>
            <View style={calStyle.top}>
                <TouchableOpacity onPress={() => navigation.navigate('SearchScreen')}>
                    <IconButton type={images.search} />
                </TouchableOpacity>
            </View>

            <Calendar 
                ...
                
                onDayPress = {(day) => {
                    navigation.navigate('MainScreen', {
                        date: day.toString,
                    });
                }}

                ...
            />
        </View>
    )
}

App.js

import React from 'react';
import {StatusBar} from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { viewStyles, textStyles } from './styles';
import Calendar from './components/Calendar';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import SearchEngine from './Search'
import App from './Main.js';

function CalendarScreen(){
    return (
        <SafeAreaView style={viewStyles.container}>
            <Calendar />
        </SafeAreaView>
    )
}

function SearchScreen(){
    return (
        <SafeAreaView style = {viewStyles.container}>
            <SearchEngine/>
        </SafeAreaView>
    )
}

function categoryScreen(){
    return (
        <SafeAreaView style = {viewStyles.container}>
            <Category />
        </SafeAreaView>
    )
}

function mainScreen(){
    return (
        <App/>
    )
}

function EditScreen(){
    return (
        <SafeAreaView style = {viewStyles.container}>
            <editScreen/>
        </SafeAreaView>
    )
}

const Stack = createStackNavigator();

export default function calendar_s(props){
    return (
        <SafeAreaProvider>
        <NavigationContainer >
                <StatusBar barStyle="light-content" style={textStyles.statusBar}/>
                <Stack.Navigator initialRouteName="calendar" screenOptions = {{headerShown: true}}>
                    <Stack.Screen name = "calendar" component = {CalendarScreen} />
                    <Stack.Screen name = "SearchScreen" component = {SearchScreen} />
                    <Stack.Screen name = "MainScreen" component = {mainScreen} />
                    <Stack.Screen name = "editScreen" component = {EditScreen} />
                </Stack.Navigator>
        </NavigationContainer>
        </SafeAreaProvider>
    );
};

Answer 1

您将参数传递给 MainScreen 而不是 App。

function mainScreen({ route, navigation }){
    return (
        <App route={route} navigation={navigation} /* <-- Pass navigation or use useNavigation() */ />
    )
}