经过多次测试可用的time picker （时间选择器）组件

结论： react-native-modal-datetime-picker 能用且样式还行！

教程 ： How to use React Native Modal Datetime Picker

import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  Button,
  Modal,
  Alert,
  TouchableHighlight,
  StyleSheet,
} from 'react-native';
import TaskList from '../taskList/TaskList';
import {Task} from '../data/task';
import {tasks} from '../data/tasksData';
import AsyncStorage from '@react-native-async-storage/async-storage';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import Sound from 'react-native-sound';
import {Picker} from '@react-native-picker/picker';

const RemindScreen = () => {
  const [selectedDate, setSelectedDate] = useState<Date>(new Date());


  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date: Date) => {
    setSelectedDate(date);
    hideDatePicker();
  };



  return (
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Title: {currentTask.title}</Text>
            <Text style={styles.modalText}>
              时间: <Button title="时间" onPress={showDatePicker} />
            </Text>
            <DateTimePickerModal
              isVisible={isDatePickerVisible}
              mode="datetime"
              minimumDate={new Date()} // 设置最小日期为当前日期
              maximumDate={new Date(2025, 3, 31)} // 设置最大日期为2023年3月31日
              // is24Hour
              // locale="en_GB"
              onConfirm={handleConfirm}
              onCancel={hideDatePicker}
            />
            <Text>choose time: {selectedDate.toISOString()}</Text>
          </View>
        </View>
      </Modal>
    </View>
  );
};


export default RemindScreen;

相关代码；

全部代码（测试使用）：

import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  Button,
  Modal,
  Alert,
  TouchableHighlight,
  StyleSheet,
} from 'react-native';
import TaskList from '../taskList/TaskList';
import {Task} from '../data/task';
import {tasks} from '../data/tasksData';
import AsyncStorage from '@react-native-async-storage/async-storage';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import Sound from 'react-native-sound';
import {Picker} from '@react-native-picker/picker';

const RemindScreen = () => {
  const [currentTask, setCurrentTask] = useState<Task>(tasks[0]);
  const [modalVisible, setModalVisible] = useState(false);
  const [isDatePickerVisible, setDatePickerVisibility] =
    useState<boolean>(false);
  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
  const [selectedAudio, setSelectedAudio] = useState<string>('');
  let sound: Sound | null = null;

  // // 从本地存储中获取数据
  // const getData = async () => {
  //   try {
  //     const value = await AsyncStorage.getItem('currentTask');
  //     if (value !== null) {
  //       setCurrentTask(JSON.parse(value));
  //     }
  //   } catch (e) {
  //     console.error('Error retrieving data:', e);
  //   }
  // };

  // // 将数据存储到本地
  // const storeData = async (currentTask: Task) => {
  //   try {
  //     await AsyncStorage.setItem('currentTask', JSON.stringify(currentTask));
  //     // setCurrentTask(currentTask);
  //   } catch (e) {
  //     console.error('Error storing data:', e);
  //   }
  // };

  // // 当 currentTask 发生变化时存储数据到本地
  // useEffect(() => {
  //   storeData(currentTask);
  // }, [currentTask]);

  // // 获取数据
  // useEffect(() => {
  //   getData();
  // }, []);

  const addTask = () => {
    setModalVisible(true);
  };

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date: Date) => {
    setSelectedDate(date);
    hideDatePicker();
  };
  const playAudio = () => {
    if (sound) {
      sound.release();
    }
    sound = new Sound(selectedAudio, Sound.MAIN_BUNDLE, error => {
      if (error) {
        console.log('failed to load the sound', error);
        return;
      }
      sound!.play(success => {
        if (success) {
          console.log('successfully finished playing');
        } else {
          console.log('playback failed due to audio decoding errors');
        }
      });
    });
  };

  const handlePickerChange = (itemValue: string) => {
    setSelectedAudio(itemValue);
    playAudio();
  };

  return (
    <View>
      <Text style={{color: 'black', fontSize: 22}}>
        语音提醒app..............
      </Text>
      <TaskList />
      <Text>current task --- </Text>
      <Text style={{fontSize: 16}}>{currentTask.title}</Text>
      <Text>{currentTask.time.toLocaleString()}</Text>
      {currentTask.remindContent && <Text>{currentTask.remindContent}</Text>}
      {/* Add your reminders UI here */}
      <Button
        title="create remind"
        accessibilityLabel="create?"
        onPress={addTask}
      />
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
          setModalVisible(!modalVisible);
        }}>
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Title: {currentTask.title}</Text>
            <Text style={styles.modalText}>
              时间: <Button title="时间" onPress={showDatePicker} />
            </Text>
            <DateTimePickerModal
              isVisible={isDatePickerVisible}
              mode="datetime"
              minimumDate={new Date()} // 设置最小日期为当前日期
              maximumDate={new Date(2025, 3, 31)} // 设置最大日期为2023年3月31日
              // is24Hour
              // locale="en_GB"
              onConfirm={handleConfirm}
              onCancel={hideDatePicker}
            />
            <Text>choose time: {selectedDate.toISOString()}</Text>
            <Text style={styles.modalText}>语音: {currentTask.voiceUrl}</Text>

            <Picker
              selectedValue={selectedAudio}
              onValueChange={handlePickerChange}>
              <Picker.Item
                label="请选择音频文件"
                value={require('../voices/heshui1.mp3')}
              />
              {/* <Picker.Item
                label="音频文件1"
                value={require(tasks[0].voiceUrl!)}
              />
              <Picker.Item
                label="音频文件2"
                value={require(tasks[1].voiceUrl!)}
              />
              <Picker.Item
                label="音频文件3"
                value={require(tasks[2].voiceUrl!)}
              />
              <Picker.Item
                label="音频文件4"
                value={require(tasks[3].voiceUrl!)}
              /> */}
            </Picker>


            <Text style={styles.modalText}>
              内容: {currentTask.remindContent}
            </Text>

            <TouchableHighlight
              style={{
                ...styles.openButton,
                backgroundColor: '#2196F3',
              }}
              onPress={() => {
                setModalVisible(!modalVisible);
              }}>
              <Text style={styles.textStyle}>取消</Text>
            </TouchableHighlight>
            <TouchableHighlight
              style={{...styles.openButton, backgroundColor: '#2196F3'}}
              onPress={() => {
                setModalVisible(!modalVisible);
              }}>
              <Text style={styles.textStyle}>确定</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  modalView: {
    margin: 20,
    width: '70%',
    height: '80%',
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  openButton: {
    backgroundColor: '#F194FF',
    borderRadius: 20,
    padding: 10,
    elevation: 2,
  },
  textStyle: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  modalText: {
    marginBottom: 15,
    textAlign: 'center',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  selectedTime: {
    marginTop: 20,
  },
});

export default RemindScreen;