（React Native）如何在MapView（或其他视图）上实现ListView / FlatList，就像这个GIF一样

Question

我想在React Native上实现与此（Yelp应用程序）相同的UI功能，我正在使用Expo。 mapview上有列表视图或平面列表。列表视图在mapview顶部的初始位置较低。我可以上下滚动列表视图，同时我仍然可以与mapview进行交互（点击或拖动）

我尝试过：我实施了一个平面列表，并将其位置设置为绝对值，顶部为固定数字。这个数字将根据onTouchStart和onTouchMove进行更改。我还将scrollEnabled设置为false。因为如果我不把它设置为假。当整个平面视图向上或向下移动时，列表仍将滚动。这种方法具有非常糟糕的用户体验，就像手指离开屏幕后列表不会继续滚动。我决定找一个更好的。

如果您有任何想法，请告诉我。谢谢！

Answer 1

您可能正在寻找处理视差滚动的库，例如react-native-parallax-scrollview。

您可以修改其基本用法示例以满足您的需求：

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>
  );
}