如何在React Native中构建支持24小时制的时长选择器

方案一：自定义双列Picker（最可靠） #

既然react-native-date-picker在iOS上的24小时制支持受限，直接用@react-native-picker/picker实现双列选择器（小时+分钟）是最稳妥的方案，完全可控范围和样式，适配iOS原生滚轮效果。

步骤1：安装依赖 #

npm install @react-native-picker/picker
# 或
yarn add @react-native-picker/picker

步骤2：实现组件 #

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Picker } from '@react-native-picker/picker';

const DurationPicker = () => {
  const [selectedHour, setSelectedHour] = useState(0);
  const [selectedMinute, setSelectedMinute] = useState(0);

  // 生成0-23小时选项
  const hourOptions = Array.from({ length: 24 }, (_, idx) => (
    <Picker.Item 
      key={idx} 
      label={`${idx}时`} 
      value={idx} 
    />
  ));

  // 生成0-59分钟选项，补零优化显示
  const minuteOptions = Array.from({ length: 60 }, (_, idx) => {
    const label = idx < 10 ? `0${idx}分` : `${idx}分`;
    return <Picker.Item key={idx} label={label} value={idx} />;
  });

  return (
    <View style={styles.container}>
      <Picker
        selectedValue={selectedHour}
        onValueChange={(val) => setSelectedHour(val)}
        style={styles.pickerColumn}
        // iOS默认滚轮模式，和系统时间选择器样式一致
      >
        {hourOptions}
      </Picker>
      <Picker
        selectedValue={selectedMinute}
        onValueChange={(val) => setSelectedMinute(val)}
        style={styles.pickerColumn}
      >
        {minuteOptions}
      </Picker>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderColor: '#e5e5e5',
    paddingVertical: 8,
  },
  pickerColumn: {
    width: '45%',
    height: 200,
  },
});

export default DurationPicker;

优势 #

• 完全自定义范围，确保从0时0分开始到23时59分结束
• iOS下默认滚轮样式和系统时间选择器一致
• 不受第三方组件的系统兼容性限制
• 支持自定义样式，可完全匹配需求

方案二：使用react-native-modal-datetime-picker（备选） #

如果偏好原生模态选择器，react-native-modal-datetime-picker的is24Hour属性在iOS上支持更稳定，可尝试：

步骤1：安装依赖 #

npm install react-native-modal-datetime-picker @react-native-community/datetimepicker
# 或
yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker

步骤2：实现组件 #

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

const CustomTimePicker = () => {
  const [isPickerVisible, setPickerVisible] = useState(false);
  const [selectedTime, setSelectedTime] = useState(new Date(new Date().setHours(0, 0, 0, 0)));

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

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

  return (
    <View>
      <Button title="选择时长" onPress={showPicker} />
      <DateTimePickerModal
        isVisible={isPickerVisible}
        mode="time"
        onConfirm={handleConfirm}
        onCancel={hidePicker}
        is24Hour={true}
        minimumDate={new Date(new Date().setHours(0, 0))}
        maximumDate={new Date(new Date().setHours(23, 59))}
      />
    </View>
  );
};

export default CustomTimePicker;

注意事项 #

• 部分iOS版本可能仍受系统区域设置影响，若出现12小时制问题，优先切换方案一

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