es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Los botones de cancelar y aceptar de Expo DateTimePicker no se pueden ver en la pantalla del selector.

Estoy usando expo DateTimePicker, mi problema es que cuando elijo el modo spinner no se muestran los botones de cancelar y aceptar, pero sí puedo verlos en otros modos de visualización.

Usé:

“expo”: “~ 43.0.2”,
“@react-native-community/datetimepicker”: “3.5.2”,

Mi código:

import React, {useState} from ‘react’;
import {View, Button, Platform} from ‘react-native’;
import DateTimePicker from ‘@react-native-community/datetimepicker’;

const App = () => {
const [date, setDate] = useState(new Date(1598051730000));
const [mode, setMode] = useState(‘date’);
const [show, setShow] = useState(false);

const onChange = (event, selectedDate) => {
const currentDate = selectedDate || date;
setShow(Platform.OS === ‘ios’);
setDate(currentDate);
};

const showMode = (currentMode) => {
setShow(true);
setMode(currentMode);
};

const showDatepicker = () => {
showMode(‘date’);
};

const showTimepicker = () => {
showMode(‘time’);
};

return (




{show && (

)}

);
};

export default App;

Gracias.

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Parece que estás utilizando el expo DateTimePicker y tienes problemas con la visualización de los botones de cancelar y OK al usar el modo de visualización de spinner.

    Una posible solución es especificar el tema de Android usando la prop androidVariant, de esta manera:

    <datetimepicker testid="dateTimePicker" value="{date}" mode="{date}" is24hour="{true}" display="spinner" onchange="{onChange}" androidvariant="nativeAndroid"></datetimepicker>
    

    Esto debería mostrar los botones de cancelar y OK correctamente en dispositivos Android.

    Alternativamente, puedes usar el modo de visualización default, el cual debería mostrar los botones en todos los dispositivos:

    <datetimepicker testid="dateTimePicker" value="{date}" mode="{date}" is24hour="{true}" display="default" onchange="{onChange}"></datetimepicker>
    

    ¡Espero que esto te ayude a resolver tu problema! Déjame saber si tienes alguna otra pregunta.

Comments are closed.