React Native日历选日期后Detail页面无数据显示问题求助

核心问题1：直接渲染对象导致无内容显示 #

react-native-calendars的onDayPress返回的day是一个对象（结构类似{date: '2023-02-15', ...其他属性}），而React Native的<Text>组件无法直接渲染对象，所以你看不到任何内容。

修改Detail.js，提取对象里的date字段来显示：

import React from 'react';
import {View, Text} from 'react-native';

function DetailScreen({route}) {
  // 增加空值判断，避免参数缺失时报错
  const day = route.params?.day;

  return(
    <View>
       <Text>{day ? day.date : '未选择日期'}</Text>
    </View>
  );
}

export default DetailScreen;

核心问题2：重复使用SafeAreaProvider #

SafeAreaProvider是全局上下文组件，只需要在应用最外层（App.js）包裹一次即可，Home.js和Detail.js里重复包裹会导致上下文冲突，可能引发潜在问题。

修改Home.js，去掉多余的SafeAreaProvider：

import React from 'react';
import {Calendar} from "react-native-calendars";
import {View} from 'react-native';

function HomeScreen({navigation}) {
  const markedDates = {
    '2023-02-01': {marked: true, dotColor: 'red'},
  }
  return(
     <View>
        <Calendar
          markedDates={markedDates}
          onDayPress={(day) => {
            navigation.push('Detail', {day});
          }}
       />
     </View>
  );
}

export default HomeScreen;

额外优化：完善参数空值处理 #

上面代码里的route.params?.day使用了可选链操作符，能避免route.params为undefined时的报错，让代码更健壮。

做完以上修改后重新运行项目，选择日历日期就能在Detail页面看到对应的日期字符串了。

内容的提问来源于stack exchange，提问作者Beom