ReactNative：使用FlatList和DatePicker创建时间列表

目标：当用户从DatePicker中选择“时间”时显示时间列表。

问题：它仅显示单个时间，而不是时间列表。

我可以从Datepicker中选择时间。当我单击确定时，所选时间将显示在清单中。但是，选择了 new 时间后，将替换 old 时间。结果导致列表上仅显示1次。

我在下面添加了该应用的屏幕截图。

因此，将感谢您提供有关解决此问题的任何帮助。

下面的代码段：

import React,{ Component } from 'react';
import { View,Text,StyleSheet,TouchableOpacity,ScrollView,flatList } from 'react-native';
import DatePicker from '@react-native-community/datetimepicker';
import Feather from 'react-native-vector-icons/Feather';
import moment from 'moment';
export default class FrCreateScreen extends Component {
constructor(props) {
super(props);
this.state = {
//Time
appointmentTime: new Date(moment()),modeAppointmentTime: 'time',showAppointmentTime: false,textAppointmentTime: moment().format('h:mm a').toString(),//new timeSlots
timeSlots: [],}
}
//[ timePicker start]
setappointmentTime = (event,appointmentTime,textAppointmentTime,timeSlots) => {
appointmentTime = appointmentTime || this.state.appointmentTime;
textAppointmentTime = textAppointmentTime || moment(appointmentTime).format('h:mm a').toString();
this.setState({
showAppointmentTime: Platform.OS === 'ios' ? true : false,//newly added
timeSlots: [{ time: textAppointmentTime }],});
}
showTime = (modeAppointmentTime,timeSlots) => {
textAppointmentTime = moment(this.state.appointmentTime).format('h:mm a').toString();
this.setState({
showAppointmentTime: true,modeAppointmentTime,})
}
timePicker = () => {
this.showTime('time');
}
//[ timePicker end ]
getappointmentTimePage() {
//const { timeSlots,selectedValue } = this.state;
const {
appointmentTime,showAppointmentTime,textAppointmentTime
} = this.state;
return (