React Native中Gesture Detector嵌套Animated.View报‘Value is undefined’错误求助

核心错误原因分析 #

出现'Value is undefined, expected an Object'错误，主要和以下几点相关：

• 未用GestureHandlerRootView包裹应用根组件，导致手势检测组件无法正常初始化
• 代码中存在变量名拼写错误，虽不直接触发报错，但会导致动画逻辑失效
• 手势事件与共享值的联动逻辑存在潜在问题

具体修复步骤 #

1. 添加GestureHandlerRootView包裹根组件 #

React Native Gesture Handler要求应用根组件必须被GestureHandlerRootView包裹，否则手势组件会抛出对象未定义错误。在应用入口文件（如App.js）中修改：

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* 你的导航/根页面组件 */}
    </GestureHandlerRootView>
  );
}

2. 修正代码拼写错误并优化手势逻辑 #

将变量名transalateY修正为translateY，同时优化手势拖动范围，避免弹窗被拖出合理区域：

import {Dimensions, StyleSheet, View} from 'react-native';
import {Gesture, GestureDetector} from 'react-native-gesture-handler';
import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

const {height, width} = Dimensions.get('window');
export const BottomSheet = () => {
    // 修正拼写错误
    const translateY = useSharedValue(0);
    // 计算弹窗最大可拖动距离（避免拖出屏幕底部）
    const maxDragDistance = height - (height / 1.5);
    
    const gesture = Gesture.Pan()
      .onUpdate(event => {
        // 限制拖动值不小于0，避免弹窗被拖到屏幕上方
        translateY.value = Math.max(0, event.translationY);
      })
      .onEnd(() => {
        // 可选：添加松手回弹逻辑，拖动超过一半则完全收起，否则回弹
        translateY.value = translateY.value > maxDragDistance / 2 
          ? maxDragDistance 
          : 0;
      });

    const rBottomSheetStyle = useAnimatedStyle(() => {
      return {
          transform: [{translateY: translateY.value}]
      }
    })

    return (
      <GestureDetector gesture={gesture}>
        <Animated.View style={[anStyle.anContainer, rBottomSheetStyle]}>
          <View
            style={{
              height: 4,
              width: 75,
              backgroundColor: '#6D6D6D',
              alignSelf: 'center',
              marginTop: 10,
              borderRadius: 10,
            }}></View>
        </Animated.View>
      </GestureDetector>
    );
};

const anStyle = StyleSheet.create({
  anContainer: {
    height: height,
    width: '100%',
    backgroundColor: 'white',
    elevation: 20,
    position: 'absolute',
    top: height / 1.5,
    borderRadius: 20,
  },
});

3. 清理缓存并重新安装依赖 #

你的依赖版本组合（RN 0.71.4 + Reanimated 2.14.4 + Gesture Handler 2.9.0）是兼容的，无需升降级，执行以下命令确保依赖正常：

rm -rf node_modules package-lock.json yarn.lock
npm install
npx react-native start --reset-cache

额外检查点 #

• 确认react-native-gesture-handler已正确自动链接（RN 0.60+版本默认自动链接）
• 若使用Expo，需确保安装expo-gesture-handler并遵循Expo官方配置指引

内容的提问来源于stack exchange，提问作者Rockzy 77