封装一个timepicker组件

以下是一个简单的封装了时间选择器（timepicker）的组件：

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

const TimePicker = ({ label, onTimeChange }) => {
  const [isTimePickerVisible, setTimePickerVisibility] = useState(false);
  const [selectedTime, setSelectedTime] = useState(null);

  const showTimePicker = () => {
    setTimePickerVisibility(true);
  };

  const hideTimePicker = () => {
    setTimePickerVisibility(false);
  };

  const handleConfirm = (time) => {
    setSelectedTime(time);
    onTimeChange(time);
    hideTimePicker();
  };

  return (
    <View>
      <TouchableOpacity onPress={showTimePicker}>
        <Text>{label}</Text>
      </TouchableOpacity>
      <DateTimePickerModal
        isVisible={isTimePickerVisible}
        mode="time"
        onConfirm={handleConfirm}
        onCancel={hideTimePicker}
      />
      <Text>Selected Time: {selectedTime ? selectedTime.toLocaleTimeString() : '-'}</Text>
    </View>
  );
};

export default TimePicker;

在这个组件中，我们使用了react-native-modal-datetime-picker库来实现时间选择器的功能。组件接收label和onTimeChange作为属性，label用于显示时间选择器的标签，onTimeChange是一个回调函数，当时间选择器的值发生变化时会调用该函数。

组件内部使用useState来管理时间选择器的显示状态和选中的时间。showTimePicker函数用于显示时间选择器，hideTimePicker函数用于隐藏时间选择器。handleConfirm函数在用户选择时间后被调用，更新选中的时间并调用onTimeChange回调函数。时间选择器的模式设置为time，即只显示时间。

最后，组件渲染一个TouchableOpacity用于显示时间选择器的标签，并在点击时显示时间选择器。DateTimePickerModal组件用于实现时间选择器的模态框，根据isTimePickerVisible属性来控制其显示和隐藏。选中的时间会以文本形式显示在下方