React js在屏幕之间传递数据，React本地日历，导航路线.params

Question

我使用的是react原生日历模块和导航，我想在单击日期按钮时将dateString数据从"CalendarScreen"发送到"MainScreen"。

当我单击任何日期数字按钮时，我会收到错误"TypeError:无法读取未定义的属性(读取"params"("。以下是react本机日历文档：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>
)
}

Calendar.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而不是应用程序。

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