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

#react-native #react-native-android #react-native-ios

#react-native #react-native-ios

Вопрос:

Иногда мое приложение довольно занято другими вещами, поэтому в течение заметного промежутка времени оно перестает реагировать на события касания, связанные с моими компонентами TouchableOpacity.

activeOpacity свойство заставляет кнопку изменять свою непрозрачность с некоторой задержкой (1-2 секунды), если присутствует такая большая нагрузка, поэтому пользователи не чувствуют, что они на самом деле нажимают эту кнопку, и продолжают нажимать, пока не увидят реакцию. Конечно, это создает для них некоторое разочарование.

Я понимаю, что я думаю, что эта анимация изменения непрозрачности также требует некоторой связи между JS и родной стороной через мост. Вот почему на него влияет связь с другим мостом, и он некоторое время перестает отвечать.

Есть ли какой-либо способ преодолеть эту ситуацию на стороне React Native и заставить кнопку немедленно изменить ее непрозрачность? Или это можно обработать, только создав новый собственный компонент кнопки для этой цели?

Ответ №1:

Проверьте requestAnimationFrame https://reactnative.dev/docs/timers.

«requestAnimationFrame (fn) — это не то же самое, что setTimeout (fn, 0) — первый сработает после того, как весь кадр будет сброшен, тогда как последний будет срабатывать как можно быстрее (более 1000 раз в секунду на iPhone 5S)».

Оберните вашу логику onPress requestAnimationFrame так, чтобы анимация происходила перед логикой.