React Native 中如何通过滑动操作调整屏幕两个区块的高度

实现思路 #

• 首先通过Dimensions API 获取屏幕可用高度，作为两个区块总高度的计算基准
• 定义拖拽分割线的偏移量状态，作为上下两个区块高度的计算依据
• 借助React Native内置的PanResponder手势系统，监听分割线的拖拽事件，实时更新偏移量，同时设置最小高度阈值避免单个区块被压缩到不可用
• 上下区块高度绑定偏移量状态，实现联动变化

完整示例代码 #

import React, { useState, useRef, useMemo } from 'react';
import { View, PanResponder, Dimensions, StyleSheet, Text } from 'react-native';

// 获取屏幕高度
const { height: SCREEN_HEIGHT } = Dimensions.get('window');
// 可自定义配置：单个区块最小高度
const MIN_BLOCK_HEIGHT = 100;
// 可自定义配置：中间拖拽条高度
const DRAG_BAR_HEIGHT = 20;

const ResizableSplitScreen = () => {
  // 分割线Y坐标初始值，默认上下区块各占一半高度
  const [splitY, setSplitY] = useState(SCREEN_HEIGHT / 2 - DRAG_BAR_HEIGHT / 2);
  // 存储拖拽开始时的分割线位置，用于计算位移
  const startSplitY = useRef(splitY);

  const panResponder = useMemo(
    () =>
      PanResponder.create({
        // 允许响应手势
        onStartShouldSetPanResponder: () => true,
        // 手势触发时记录初始位置
        onPanResponderGrant: () => {
          startSplitY.current = splitY;
        },
        // 拖拽过程中实时更新分割线位置，加边界限制
        onPanResponderMove: (e, gestureState) => {
          const newY = startSplitY.current + gestureState.dy;
          if (newY >= MIN_BLOCK_HEIGHT && newY <= SCREEN_HEIGHT - MIN_BLOCK_HEIGHT - DRAG_BAR_HEIGHT) {
            setSplitY(newY);
          }
        },
      }),
    [splitY]
  );

  return (
    <View style={styles.container}>
      {/* 上展示区块 */}
      <View style={[styles.block, styles.topBlock, { height: splitY }]}>
        <Text>上区块内容</Text>
      </View>
      {/* 中间拖拽控制条 */}
      <View style={styles.dragBar} {...panResponder.panHandlers}>
        <View style={styles.dragIndicator} />
      </View>
      {/* 下展示区块 */}
      <View style={[styles.block, styles.bottomBlock, { height: SCREEN_HEIGHT - splitY - DRAG_BAR_HEIGHT }]}>
        <Text>下区块内容</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  block: {
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  topBlock: {
    backgroundColor: '#e3f2fd',
  },
  bottomBlock: {
    backgroundColor: '#ffebee',
  },
  dragBar: {
    height: DRAG_BAR_HEIGHT,
    width: '100%',
    backgroundColor: '#f5f5f5',
    justifyContent: 'center',
    alignItems: 'center',
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderColor: '#e0e0e0',
  },
  dragIndicator: {
    width: 40,
    height: 4,
    borderRadius: 2,
    backgroundColor: '#9e9e9e',
  },
});

export default ResizableSplitScreen;

注意事项 #

• 可根据业务需求调整MIN_BLOCK_HEIGHT最小高度阈值、DRAG_BAR_HEIGHT拖拽条高度的配置值
• 如需适配刘海屏/挖孔屏，可将外层容器替换为SafeAreaView，并对应减去安全区域的高度
• 若上下区块内部嵌入了ScrollView/FlatList等滚动组件，可根据业务场景处理手势冲突，比如仅当滚动组件滚动到顶部/底部时再触发拖拽逻辑

内容的提问来源于stack exchange，提问作者Umesh AHIR