React Native：如何通过GestureHandler实现元素从下往上改变高度

我在React Native应用中用GestureHandler实现了盒子高度调整功能，但当前效果是从上往下改变高度，需要改成完全相反的从下往上调整的效果。

当前代码如下：

import { StyleSheet } from "react-native";
import { PanGestureHandler } from "react-native-gesture-handler";
import Animated, {
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from "react-native-reanimated";
export default function App() {
  const translateY = useSharedValue(44);

  const gestureHandler = useAnimatedGestureHandler({
    onStart: (event, context) => {
      context.translateY = translateY.value;
    },
    onActive: (event, context) => {
      translateY.value = event.translationY + context.translateY;
      if (translateY.value > 200) {
        translateY.value = 200;
      }
    },
    onEnd: (_) => {
      if (translateY.value == 200) {
        translateY.value = withSpring(50);
      }
    },
  });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      height: translateY.value,
    };
  });

  return (
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Animated.View style={[styles.box, animatedStyle]} />
    </PanGestureHandler>
  );
}

const styles = StyleSheet.create({
  box: {
    width: 65,
    backgroundColor: "black",
    alignSelf: "center",
    marginTop: 350,
  },
});

当前拖动时盒子从顶部向下延伸，我需要实现盒子从底部向上延伸的效果。

修改方案 #

需要调整核心定位逻辑和手势计算逻辑，修改后的代码如下：

import { StyleSheet } from "react-native";
import { PanGestureHandler } from "react-native-gesture-handler";
import Animated, {
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from "react-native-reanimated";
export default function App() {
  const height = useSharedValue(44);
  const MIN_HEIGHT = 44;
  const MAX_HEIGHT = 200;

  const gestureHandler = useAnimatedGestureHandler({
    onStart: (event, context) => {
      context.startHeight = height.value;
    },
    onActive: (event, context) => {
      // 向下拖动时translationY为正，累加后高度增加，对应盒子向上延伸
      const newHeight = context.startHeight + event.translationY;
      // 限制高度在最小和最大值之间
      height.value = Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, newHeight));
    },
    onEnd: (_) => {
      if (height.value === MAX_HEIGHT) {
        height.value = withSpring(MIN_HEIGHT);
      }
    },
  });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      height: height.value,
    };
  });

  return (
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Animated.View style={[styles.box, animatedStyle]} />
    </PanGestureHandler>
  );
}

const styles = StyleSheet.create({
  box: {
    width: 65,
    backgroundColor: "black",
    alignSelf: "center",
    // 固定盒子底部位置，高度增加时向上延伸
    position: "absolute",
    bottom: 20, // 可根据需求调整底部间距
  },
});

关键改动说明 #

• 定位调整：将盒子从marginTop改为绝对定位bottom，让盒子底部固定在屏幕下方，高度变化时向上延伸
• 手势逻辑优化：反转手势计算逻辑，向下拖动时event.translationY为正值，累加后高度增加，对应盒子向上扩展
• 边界值处理：用Math.max和Math.min替代硬编码判断，更简洁地限制高度在MIN_HEIGHT到MAX_HEIGHT之间
• 变量命名规范：将translateY改为height，更贴合变量实际用途，避免语义混淆

内容的提问来源于stack exchange，提问作者Benjamin Jones