iOS端React Native日期选择器：保留星期月日，移除时间

你遇到的问题本质是iOS原生UIDatePicker没有直接支持仅显示星期、月份、日期的模式——date模式默认显示月/日/年，datetime模式必带时间，所以@react-native-community/datetimepicker和react-native-date-picker这类封装原生组件的库都没法直接实现需求，得用以下两种方式解决：

1. 自定义滚轮选择器（纯RN实现） #

自己构建完全可控的滚轮选择器，比如用react-native-wheel-picker或手动用ScrollView/FlatList模拟滚轮，步骤如下：

• 生成数据源：
  • 星期选项：包含「今日」、「周一」至「周日」，对应最近的目标日期
  • 月份选项：1-12月的中文/英文名称
  • 日期选项：根据选中的月份动态生成对应天数
• 处理选中逻辑：比如「今日」自动映射到当天日期，选中星期+月+日后组合成完整日期对象
• 示例代码片段（基于react-native-wheel-picker）：

import WheelPicker from 'react-native-wheel-picker';
import { useState } from 'react';
import { View } from 'react-native';

const WeekOptions = ['今日', '周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const MonthOptions = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
const getDayOptions = (month) => {
  const daysInMonth = new Date(new Date().getFullYear(), month, 0).getDate();
  return Array.from({length: daysInMonth}, (_, i) => `${i+1}日`);
};

const CustomDatePicker = () => {
  const today = new Date();
  const [selectedWeek, setSelectedWeek] = useState(0);
  const [selectedMonth, setSelectedMonth] = useState(today.getMonth());
  const [selectedDay, setSelectedDay] = useState(today.getDate()-1);
  const dayOptions = getDayOptions(selectedMonth+1);

  return (
    <View style={{flexDirection: 'row', justifyContent: 'space-around', paddingVertical: 16}}>
      <WheelPicker
        selectedItem={selectedWeek}
        data={WeekOptions}
        onItemSelected={(index) => setSelectedWeek(index)}
        itemTextColor="#333"
        itemTextSize={16}
      />
      <WheelPicker
        selectedItem={selectedMonth}
        data={MonthOptions}
        onItemSelected={(index) => setSelectedMonth(index)}
        itemTextColor="#333"
        itemTextSize={16}
      />
      <WheelPicker
        selectedItem={selectedDay}
        data={dayOptions}
        onItemSelected={(index) => setSelectedDay(index)}
        itemTextColor="#333"
        itemTextSize={16}
      />
    </View>
  );
};

2. 定制iOS原生组件（需要OC/Swift开发能力） #

如果想要保留原生UIDatePicker的交互质感，可以修改原生代码：

• 创建自定义的UIDatePicker子类，或用UITableView模拟滚轮布局，自定义每一列的显示内容
• 给RN项目写原生扩展，暴露自定义的日期选择器组件给RN调用
• 这种方式开发成本较高，但能完全匹配原生样式

总结：iOS原生没有现成的模式支持你的需求，必须通过自定义实现。如果不想碰原生代码，优先选择纯RN的自定义滚轮方案。

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