Reactjs在螢屏、react-native-calendar、導航route.params之間傳遞資料

我正在使用 react-native-calendar 模塊和導航，并且我想在單擊日期按鈕時將 dateString 資料從“CalendarScreen”發送到“MainScreen”。

當我單擊任何日期數字按鈕時，我收到此錯誤“型別錯誤：無法讀取未定義的屬性（讀取“引數”）”。這是 react-native-calendar 檔案：https : //github.com/wix/react-native-calendars 我嘗試傳遞另一個與日歷模塊無關的資料，但沒有用

我會感謝您的任何建議

主程式

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

應用程式.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>
    );
};

uj5u.com熱心網友回復：

您將引數傳遞給 MainScreen 而不是 App。

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

標籤：javascript 反应 反应原生

上一篇：如何在JavaScript中使用多個類名洗掉類名

下一篇：為什么當我更改其id屬性時我的按鈕沒有點擊？