React Native中Gorhom Bottom Sheet报animatedIndex.value未定义错误

问题描述 #

我在React Native应用中用Gorhom Bottom Sheet组件创建可滑动、高度随内容自适应的底部弹窗，现在遇到**"property value of undefined"**错误，推测问题出在animatedIndex.value上。

相关代码如下：

BottomSheet.tsx #

const containerStyle = useMemo(() => [styles.header, style], [style]);
const containerAnimatedStyle = useAnimatedStyle(() => {
  const borderTopRadius = interpolate(
    animatedIndex.value,
    [1, 2],
    [20, 0],
    Extrapolate.CLAMP
  );
  return {
    borderTopLeftRadius: borderTopRadius,
    borderTopRightRadius: borderTopRadius,
  };
});
const leftIndicatorStyle = useMemo(
  () => ({
    ...styles.indicator,
    ...styles.leftIndicator,
  }),
  []
);

App.js #

<GestureHandlerRootView style={{ flex: 1 }}>
  <BottomSheets/>
</GestureHandlerRootView>

错误原因分析 #

animatedIndex未正确初始化或未从Gorhom Bottom Sheet的组件上下文/Props中获取。Gorhom Bottom Sheet的animatedIndex是组件内部提供的动画值，必须通过官方提供的useBottomSheet钩子或组件Props传递才能访问，直接调用会导致animatedIndex为undefined，进而访问.value时报错。

解决步骤 #

1. 正确获取animatedIndex
   在自定义组件内部，通过useBottomSheet钩子获取animatedIndex：

   import { useBottomSheet } from '@gorhom/bottom-sheet';
   
   // 组件内部代码
   const { animatedIndex } = useBottomSheet();
   

   注意：该钩子必须在BottomSheet核心组件的子组件或内部使用，若自定义的是底部弹窗的handle组件，需要将animatedIndex作为Props传递进去。

2. 检查组件嵌套结构
   确保你的BottomSheets组件内部正确包裹了Gorhom的BottomSheet核心组件，示例结构：

   import BottomSheet from '@gorhom/bottom-sheet';
   
   const BottomSheets = () => {
     const snapPoints = useMemo(() => ['25%', '50%', '100%'], []);
     const { animatedIndex } = useBottomSheet();
   
     return (
       <BottomSheet
         snapPoints={snapPoints}
         renderHandle={() => <CustomHandle animatedIndex={animatedIndex} />}
       >
         {/* 底部弹窗内容区域 */}
       </BottomSheet>
     );
   };
   

3. 确认依赖安装与配置
   确保已安装所有必要依赖，并完成react-native-reanimated的配置：

   npm install @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler
   

   按照官方要求在babel.config.js中添加Reanimated插件。

4. 适配Reanimated版本
   若使用Reanimated v3，interpolate写法需保持正确导入：

   import { interpolate, Extrapolate } from 'react-native-reanimated';
   
   const borderTopRadius = interpolate(animatedIndex.value, [1, 2], [20, 0], Extrapolate.CLAMP);
   

额外提示 #

• 高度自适应可通过开启enableContentPanningGesture为true，让内容组件自行处理高度，或配合contentContainerStyle使用flex布局实现。
• 调试时可先简化代码，确认animatedIndex能正常获取后，再添加动画样式逻辑。

内容的提问来源于stack exchange，提问作者Raghul Rover