Привет всем, возможно, у друзей все еще есть проблемы с реализацией пакета выбора даты и времени в проекте, который мы делаем, в этом случае я поделюсь своим опытом реализации пакета выбора даты и времени в проекте, который я делаю.
Что нам нужно, так это первый шаг:
1. Откройте свой терминал в проекте, а затем установите его с помощью приведенной ниже команды.
npm install @react-native-community/datetimepicker --save
or
yarn add @react-native-community/datetimepicker
2. второй шаг — импорт в приведенную ниже команду.
import DateTimePicker from '@react-native-community/datetimepicker'
3. Для более полного кода есть.
import DateTimePicker from '@react-native-community/datetimepicker' const App = () => { const [datePicker, setDatePicker] = useState(false); const [date, setDate] = useState(new Date()); const [timePicker, setTimePicker] = useState(false); const [time, setTime] = useState(new Date(Date.now())); function showDatePicker() { setDatePicker(true); } function showTimePicker() { setTimePicker(true); } function onDateSelected(event, value) { setDate(value); console.log(value); setDatePicker(false); } function onTimeSelected(event, value) { setTime(value); setTimePicker(false); } return ( <View> <Text style={styleSheet.text}>Date ={date.toLocaleDateString()}</Text> <Text style={styleSheet.text}> Time = {time.getHours()} : {time.getMinutes()} </Text> {/* <DateandTime /> */} {datePicker ? ( <DateTimePicker value={date} mode={'date'} display={'calendar'} is24Hour={true} onChange={onDateSelected} onTouchCancel={() => setDatePicker(false)} style={styleSheet.datePicker} /> ) : ( console.log('asdsa') )} {/* {timePicker ? ( <DateTimePicker value={time} mode={'time'} display={'default'} is24Hour={false} onChange={onTimeSelected} style={styleSheet.datePicker} /> ) : ( <></> )} */} <View style={{marginBottom: 20}}> <Button title="date" onPress={() => showDatePicker()} /> </View> <Button title="Time" onPress={() => showTimePicker()} /> </View> ); }; const styleSheet = StyleSheet.create({ text: { fontSize: 25, color: 'red', padding: 3, marginBottom: 10, textAlign: 'center', }, // Style for iOS ONLY... datePicker: { justifyContent: 'center', alignItems: 'flex-start', width: 320, height: 260, display: 'flex', }, }); export default App;
Будем надеяться, что трудности, с которыми сейчас сталкиваются друзья, могут быть решены.
Предупреждение…!!!
это только андроид