如何用React Native实现可滑动列表控件及iOS Yelp式地图叠加列表？

Great question! Let's break this down into two parts: first, implementing a basic scrollable list in React Native, then recreating that slick Yelp-style map + sliding list interface you're curious about.

For most scrollable list use cases, React Native's built-in FlatList and SectionList are your best bets—they're optimized for performance (with virtualized rendering, so they only render items currently on screen) and come with out-of-the-box features like pull-to-refresh and infinite scrolling.

Example: Basic FlatList #

import React from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

// Sample data
const listData = Array.from({ length: 20 }, (_, index) => ({
  id: index.toString(),
  title: `List Item ${index + 1}`
}));

const BasicScrollableList = () => {
  const renderItem = ({ item }) => (
    <View style={styles.listItem}>
      <Text style={styles.itemText}>{item.title}</Text>
    </View>
  );

  return (
    <FlatList
      data={listData}
      keyExtractor={(item) => item.id} // Required for performance
      renderItem={renderItem}
      // Optional: Add pull-to-refresh
      refreshControl={
        <RefreshControl
          refreshing={false}
          onRefresh={() => console.log('Refreshing...')}
        />
      }
      // Optional: Add infinite scroll
      onEndReached={() => console.log('Load more items')}
      onEndReachedThreshold={0.1}
    />
  );
};

const styles = StyleSheet.create({
  listItem: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0'
  },
  itemText: {
    fontSize: 16
  }
});

export default BasicScrollableList;

SectionList works similarly but is designed for grouped data with section headers—perfect if you need to categorize list items.

Yelp's interface is a classic "bottom sheet" pattern: a map fills the screen, with a scrollable list sitting above it that slides up to reveal more content, and slides down to show more map. Here's how to build this:

Core Approach #

• Layered Layout: Place the map as the background (full screen), then position the list absolutely above it.
• Animated Scroll Handling: Use React Native's Animated API to track the list's scroll position and dynamically adjust its position/size for smooth transitions.
• Boundary Controls: Limit the list's movement so it doesn't slide off-screen, and switch between "moving the list" and "scrolling list content" at the right points.

Full Implementation Example #

First, install the map dependency:

npm install react-native-maps

Then the code:

import React, { useRef } from 'react';
import { View, Animated, FlatList, Dimensions, Text, StyleSheet, SafeAreaView } from 'react-native';
import MapView from 'react-native-maps';

const { height: SCREEN_HEIGHT } = Dimensions.get('window');
const MIN_LIST_HEIGHT = SCREEN_HEIGHT * 0.3; // Start with 30% of screen visible
const MAX_LIST_HEIGHT = SCREEN_HEIGHT; // Expand to full screen

const YelpStyleMapList = () => {
  // Track scroll position for animations
  const scrollY = useRef(new Animated.Value(0)).current;

  // Interpolate scroll position to adjust list's top position
  const listTop = scrollY.interpolate({
    inputRange: [0, SCREEN_HEIGHT - MIN_LIST_HEIGHT],
    outputRange: [SCREEN_HEIGHT - MIN_LIST_HEIGHT, 0],
    extrapolate: 'clamp' // Prevent list from sliding off-screen
  });

  // Sample list data
  const searchResults = Array.from({ length: 25 }, (_, i) => ({
    id: i.toString(),
    name: `Local Business ${i + 1}`,
    rating: (Math.random() * 2 + 3).toFixed(1)
  }));

  const renderResultItem = ({ item }) => (
    <View style={styles.resultItem}>
      <Text style={styles.businessName}>{item.name}</Text>
      <Text style={styles.rating}>★ {item.rating}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      {/* Background Map */}
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421
        }}
      />

      {/* Sliding List */}
      <Animated.View style={[styles.listContainer, { top: listTop }]}>
        {/* Drag indicator to hint at interactivity */}
        <View style={styles.dragIndicator} />
        <SafeAreaView>
          <FlatList
            data={searchResults}
            keyExtractor={(item) => item.id}
            renderItem={renderResultItem}
            onScroll={Animated.event(
              [{ nativeEvent: { contentOffset: { y: scrollY } } }],
              { useNativeDriver: false }
            )}
            scrollEventThrottle={16} // Smooth animation updates
            contentContainerStyle={{ paddingBottom: 20 }}
          />
        </SafeAreaView>
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  map: {
    ...StyleSheet.absoluteFillObject
  },
  listContainer: {
    position: 'absolute',
    left: 0,
    right: 0,
    backgroundColor: 'white',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.15,
    shadowRadius: 8,
    elevation: 5 // Android shadow support
  },
  dragIndicator: {
    width: 40,
    height: 4,
    backgroundColor: '#ccc',
    borderRadius: 2,
    alignSelf: 'center',
    marginVertical: 8
  },
  resultItem: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0'
  },
  businessName: {
    fontSize: 18,
    fontWeight: '500'
  },
  rating: {
    fontSize: 14,
    color: '#f59e0b',
    marginTop: 4
  }
});

export default YelpStyleMapList;

Key Details Explained #

• Animation: The scrollY value tracks how far the user has scrolled. We use interpolate to convert that scroll distance into a top position for the list—so scrolling up pulls the list into full view, and scrolling down tucks it back.
• Boundary Clamping: The extrapolate: 'clamp' setting ensures the list stops at the top of the screen (no over-scrolling off-screen) and stays at its initial bottom position when fully collapsed.
• User Experience: The drag indicator at the top of the list gives users a visual cue that the list is interactive.

Short answer: No, not really.

• React Navigation: Designed for page-to-page navigation, not for in-screen sliding components like this bottom sheet.
• React Native Swiper: Built for horizontal carousel-style scrolling, not vertical bottom sheet interactions.

The approach above using Animated + FlatList is the most lightweight and native-feeling way to build this UI.

内容的提问来源于stack exchange，提问作者James Ko