Блог

Я новичок в react native. ищу совет о том, как подойти.

Итак, я пытаюсь сделать несколько кнопок с функцией, которая позволит пользователям использовать только определенные временные интервалы. например, есть слот для кнопок с этими функциями

1. разрешено только с 9 утра до 10 утра
2. если не в течение времени, тосты, которые возвращаются в 9 утра

Это действительно необычная функция, но мне действительно нужно это реализовать. Любое предложение, как подойти к ограничению функциональности onPress на основе времени?

Если это кнопка, у которой есть временной интервал, вы можете использовать функцию даты, чтобы получить текущий час и установить флажок, чтобы отключить кнопку, когда она находится за пределами вашего временного интервала.

 var hours = new Date().getHours(); //To get the Current Hours
  

Если это пользователь, у которого есть временной интервал, вам нужно сохранить пользователя в базе данных, а на объекте user сохранить время. Затем приложение проверит сохраненный пользователем временной интервал, чтобы отключить кнопку.

Отключите кнопку следующим образом:

 <TouchableOpacity disabled={checkTimeSlot()}>
  <Text>I'm disabled</Text>
</TouchableOpacity>
  

Затем создайте вспомогательную функцию checkTimeSlot() , которая имеет логику проверки времени / пользователя

Это не так уж сложно реализовать, вам просто нужно поместить логику времени в обработчик нажатия. при каждом нажатии вы получаете новую дату (new Date()), из которой вы извлекаете текущий час (new Date().getHours()), а затем с помощью переключателя в обработчике вы выполняете то, что хотите. Вот закуска, которая показывает, что это работает :). https://snack.expo.io/@bitxhgunner/time-based-logic . Имейте в виду, что время, указанное в окнах предупреждений, может отличаться, поскольку сервер находится в другом часовом поясе.

Попробуйте это

 export default function App() {

  const handlePress = () => {
    const current = new Date();
    const currentHour = current.getHours();
    if( currentHour == 9 || currentHour == 10 ){
      alert("Time is correct");
    } else {
      alert("Come back at 9am");
    }
  };

  return (
    <View>
      <TouchableOpacity onPress={handlePress}>
        <Text>Morning slot</Text>
      </TouchableOpacity>
    </View>
  );
}