React Native(TypeScript)中点击returnToDefault按钮如何设置时间为7点？

核心逻辑 #

通过状态管理当前选中的时间，点击重置按钮时，利用moment构造出当天早上7点整的时间对象，更新状态后同步到DatePicker组件即可完成重置。

完整代码示例 #

以下是集成了重置功能的Preferences组件实现：

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import DatePicker from 'react-native-date-picker';
import moment from 'moment';

const Preferences = () => {
  // 初始化时间状态，默认可设为当前时间或直接设为7点
  const [selectedTime, setSelectedTime] = useState<Date>(new Date());

  // 重置到当天7:00的处理函数
  const returnToDefault = () => {
    // 构造当天7点0分0秒的Date对象
    const defaultTime = moment()
      .hour(7)
      .minute(0)
      .second(0)
      .toDate();
    setSelectedTime(defaultTime);
  };

  return (
    <View style={{ padding: 20 }}>
      {/* 时间选择器，绑定状态与更新逻辑 */}
      <DatePicker
        date={selectedTime}
        onDateChange={setSelectedTime}
        mode="time" // 仅显示时间选择模式
        locale="zh-CN" // 根据需求设置语言
        textColor="#333"
      />
      {/* 重置按钮 */}
      <Button 
        title="恢复默认时间" 
        onPress={returnToDefault} 
        style={{ marginTop: 20 }}
      />
    </View>
  );
};

export default Preferences;

关键细节说明 #

• moment时间构造：moment().hour(7).minute(0).second(0)会基于当前日期生成7点整的moment实例，通过toDate()转换为原生Date对象，完美适配react-native-date-picker的date属性要求。
• 时间选择器模式：设置mode="time"可以隐藏日期选择区域，专注于时间选择场景。
• 状态同步：点击按钮后更新selectedTime状态，DatePicker会自动响应状态变化，展示重置后的7点时间。

依赖安装提示 #

确保已正确安装所需依赖：

npm install react-native-date-picker moment
# 或使用yarn
yarn add react-native-date-picker moment

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