Блог

Главная - Вопросы по программированию - Проведите пальцем вниз модально только тогда, когда вы находитесь в верхней части плоского списка

Проведите пальцем вниз модально только тогда, когда вы находитесь в верхней части плоского списка

#react-native #expo #react-native-flatlist #react-native-gesture-handler

Вопрос:

Я пытаюсь клонировать модальные комментарии TikTok (см. gif ниже), где пользователи должны иметь возможность прокручивать вниз, чтобы просмотреть больше комментариев, и как только они прокручиваются вверх и достигают вершины, вместо этого они будут опущены.

Комментарии TikTok

В своем коде я вложил плоский список в PanGestureHandler. В настоящее время, как только пользователь достигает верхней части комментариев и пытается провести пальцем вниз, модал не перемещается.

Ответ №1:

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

  onMomentumScrollEnd={(event) => { 
      if(event.nativeEvent.contentOffset.y > 105){
        setselectedbutton(2)
      }else if(event.nativeEvent.contentOffset.y < 105){
        setselectedbutton(1)
      }
   }}

Ответ №2:

вы можете использовать https://github.com/gorhom/react-native-bottom-sheet, это репо предоставляет BottomSheetFlatList именно то, что вам нужно

Метки: ,