如何为react-native-datetimepicker设置字符串类型初始显示文本

核心思路是分离日期选择器的绑定值与前端展示逻辑，不需要修改react-native-datetimepicker要求的Date类型值约束，仅需新增初始状态判断即可实现需求，具体修改如下：

1. 将date状态的初始值设为null，替代默认的当前系统日期
2. 渲染展示文本时做分支判断：date为null时显示「编辑出生日期」提示，用户选中日期后再格式化展示日期内容
3. 给DateTimePicker的value属性加兜底逻辑，date为null时传入自定义的默认日期（出生日期场景可默认定位到18年前的日期，降低用户选择成本）

修改后的完整代码如下：

import React, { useState } from 'react';
import { Text, View, Platform } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const BirthdayPicker = () => {
  // 初始值设为null代表未选择出生日期
  const [date, setDate] = useState(null);
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    // 仅用户确认选择时更新日期
    if (selectedDate) {
      setDate(selectedDate);
    }
    setShow(Platform.OS === 'ios');
  };

  // 点击文本唤起日期选择器
  const triggerPicker = () => setShow(true);

  return (
    <View>
      <Text onPress={triggerPicker}>
        {date ? date.toLocaleDateString() : '编辑出生日期'}
      </Text>
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          // 兜底默认值：未选择时默认定位到18年前的日期，可按需调整
          value={date || new Date(Date.now() - 18 * 365 * 24 * 60 * 60 * 1000)}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );
};

export default BirthdayPicker;

如果需要自定义日期展示格式，可以引入dayjs/date-fns等轻量日期工具库替换内置的toLocaleDateString方法即可。

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