(React Native) Как реализовать ListView/FlatList в MapView (или другом представлении), как этот GIF

Я хочу реализовать ту же функцию пользовательского интерфейса, что и эта (приложение Yelp) в React Native, и я использую Expo. В представлении карты есть представление списка или плоский список. Представление списка имеет более низкую начальную позицию в верхней части представления карты. Я могу прокручивать список вверх и вниз, пока еще могу взаимодействовать с картой (нажимая или перетаскивая).
Снимок экрана из приложения Yelp

Что я пробовал: я реализую плоский список и устанавливаю его позицию абсолютной, а вершину - фиксированным числом. этот номер будет изменен в соответствии с onTouchStart и onTouchMove. Я также установил для scrollEnabled значение false. Потому что, если я не установлю для него значение false. Список по-прежнему будет прокручиваться, пока весь плоский список перемещается вверх или вниз. Этот подход имеет очень плохой пользовательский интерфейс, например, список не будет продолжать прокручиваться после того, как палец покинет экран. Решил найти получше.

Пожалуйста, скажите мне, если у вас есть какие-либо идеи. Благодарю вас!


react-native listview expo react-native-flatlist
person Kevin Science    schedule 27.03.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Возможно, вы ищете библиотеку, которая обрабатывает прокрутку параллакса, например react-native-parallax -прокрутка.

Вы можете изменить их базовый пример использования в соответствии с вашими потребностями:

import ParallaxScrollView from 'react-native-parallax-scroll-view';

// Inside of a component's render() method:
render() {
  return (
    <ParallaxScrollView
      backgroundColor="blue"
      contentBackgroundColor="pink"
      parallaxHeaderHeight={300}
      renderForeground={() => (
       <View style={{ height: 300, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          // add map component here
        </View>
      )}>
      <View style={{ height: 500 }}>
        // add the list items you want to scroll through here
      </View>
    </ParallaxScrollView>
  );
}
person Pat Needham    schedule 27.03.2018
comment
Привет Пэт. Спасибо за ответ на вопрос! Я правда ценю это. Решение, которое вы предоставили, действительно хорошее. Я попробовал и изучил это. Кажется, это немного отличается от того, что я ожидаю. Вид карты должен быть статичным, лежащим на фоне. Он не будет двигаться вверх или вниз, перемещая список. Но мне очень нравится твой ответ! - person Kevin Science; 28.03.2018
comment
Привет, Кевин, ты нашел решение своей проблемы? я сталкиваюсь с чем-то подобным - person Himanshu G; 23.08.2019