React Native Expo中实现上滑增大View高度铺满全屏

不需要依赖任何第三方modal包，这类组件天生脱离当前页面视图层级，很难做和下层内容的平滑过渡，用React Native自带的动画+手势API就能实现稳定效果：

核心实现逻辑 #

• 外层容器使用相对定位，不设置overflow: hidden避免展开时内容被裁切
• 用Animated.Value绑定ScrollView外层容器的高度，初始值设为容器高度的40%，展开时动画过渡到全屏高度
• 用PanResponder监听上滑手势，手势滑动距离超过阈值时触发展开动画
• 未展开状态下禁用ScrollView内部滚动，避免和展开手势冲突

完整实现代码 #

import { View, ScrollView, Animated, PanResponder, Dimensions } from 'react-native';
import { useRef, useState } from 'react';

export default function MyComponent() {
  const { height: screenHeight } = Dimensions.get('window');
  // 配置初始高度、全屏高度
  const INITIAL_HEIGHT = screenHeight * 0.4;
  const FULL_HEIGHT = screenHeight;
  // 高度动画控制值
  const scrollViewHeight = useRef(new Animated.Value(INITIAL_HEIGHT)).current;
  // 展开状态标记
  const [isExpanded, setIsExpanded] = useState(false);

  // 手势响应配置
  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: (_, gestureState) => {
        // 仅未展开状态下、上滑距离超过10px时抢响应权
        return !isExpanded && gestureState.dy < -10;
      },
      onPanResponderRelease: (_, gestureState) => {
        // 上滑距离超过50px触发全屏展开动画
        if (gestureState.dy < -50) {
          Animated.timing(scrollViewHeight, {
            toValue: FULL_HEIGHT,
            duration: 300,
            useNativeDriver: false,
          }).start(() => setIsExpanded(true));
        }
      }
    })
  ).current;

  // 监听ScrollView内部滚动，滑到顶部继续下滑时触发收起
  const handleScroll = (e) => {
    const offsetY = e.nativeEvent.contentOffset.y;
    if (isExpanded && offsetY < -50) {
      Animated.timing(scrollViewHeight, {
        toValue: INITIAL_HEIGHT,
        duration: 300,
        useNativeDriver: false,
      }).start(() => setIsExpanded(false));
    }
  };

  return (
    <View style={{ flex: 1, position: 'relative' }}>
      <View>{/* 页面其他固定内容 */}</View>
      <View>{/* 页面其他固定内容 */}</View>
      <Animated.View
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          height: scrollViewHeight,
          zIndex: isExpanded ? 10 : 1,
          backgroundColor: '#ffffff' // 加背景色避免展开时透出下层内容
        }}
        {...panResponder.panHandlers}
      >
        <ScrollView
          scrollEnabled={isExpanded}
          onScroll={handleScroll}
          scrollEventThrottle={16}
        >
          {/* ScrollView内部业务内容 */}
        </ScrollView>
      </Animated.View>
    </View>
  )
}

避坑提示 #

• 未展开状态必须把ScrollView的scrollEnabled设为false，否则内部滚动事件和外层展开手势会冲突，导致滑动卡顿或者触发逻辑混乱
• 如果需要跟手滑动效果，可以在onPanResponderMove回调里实时更新scrollViewHeight的值，不用等松手再触发动画，交互会更丝滑
• 如果需要适配全面屏安全区，全屏高度可以减去安全区top/bottom的距离，避免内容被状态栏或者home条遮挡

内容的提问来源于stack exchange，提问作者Nicolas Munoz