React Native DateTimePicker时区问题：获取选中本地时间的方法

一、解决当前组件的时区问题 #

你不需要通过e.nativeEvent.timestamp构造Date对象，直接使用onChange回调的第二个参数selectedDate即可获取用户选中的本地时间。这个参数本身就是对应本地时间的Date实例，不会触发时区转换。

修改后的代码如下：

<DateTimePicker
  testID="datePicker"
  value={date}
  mode={'datetime'}
  is24Hour={true}
  onChange={(e, selectedDate) => {
    if (selectedDate) {
      console.log('选中的本地时间：', selectedDate);
      setDate(selectedDate);
    }
  }}
/>

selectedDate的本地时间属性（比如getHours()、getDate()）会直接返回用户选中的数值，完全匹配业务需求。

二、更易用的React Native替代组件 #

如果觉得原组件交互不够友好，推荐以下两个新手友好的替代组件：

1. react-native-modal-datetime-picker #

基于@react-native-community/datetimepicker封装，自带模态框交互，API设计更简洁，默认返回本地时间的Date对象，无需额外处理时区问题。

安装命令：

npm install react-native-modal-datetime-picker @react-native-community/datetimepicker

简单使用示例：

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';

const TimePicker = () => {
  const [isPickerVisible, setIsPickerVisible] = useState(false);
  const [selectedDate, setSelectedDate] = useState(new Date());

  const showPicker = () => setIsPickerVisible(true);
  const hidePicker = () => setIsPickerVisible(false);

  const handleConfirm = (date) => {
    setSelectedDate(date);
    hidePicker();
  };

  return (
    <View>
      <Button title="选择日期时间" onPress={showPicker} />
      <DateTimePickerModal
        isVisible={isPickerVisible}
        mode="datetime"
        is24Hour={true}
        onConfirm={handleConfirm}
        onCancel={hidePicker}
      />
    </View>
  );
};

export default TimePicker;

2. react-native-date-picker #

轻量级日期时间选择组件，适配iOS和Android，自带模态框，无需依赖其他库，默认返回本地时间，文档清晰，上手快。

安装命令：

npm install react-native-date-picker

简单使用示例：

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

const TimePicker = () => {
  const [date, setDate] = useState(new Date());
  const [open, setOpen] = useState(false);

  return (
    <View>
      <Button title="选择日期时间" onPress={() => setOpen(true)} />
      <DatePicker
        modal
        open={open}
        date={date}
        mode="datetime"
        is24hourSource="locale"
        onConfirm={(date) => {
          setOpen(false);
          setDate(date);
        }}
        onCancel={() => {
          setOpen(false);
        }}
      />
    </View>
  );
};

export default TimePicker;

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