React Native Gorhom Bottom Sheet背景色随拖拽动态变化问题求助

不用依赖默认的BackdropComponent，直接通过组件提供的动画值监听拖拽进度，动态修改背景色即可实现需求：

1. 禁用默认背景组件，自定义一个动画背景层放在弹窗下方
2. 利用animatedIndex（或animatedPosition）获取拖拽进度，通过插值映射颜色变化

示例代码 #

import React, { useRef } from 'react';
import { View, Animated, Dimensions } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

const { height: screenHeight } = Dimensions.get('window');

const CustomBottomSheet = () => {
  const bottomSheetRef = useRef(null);

  // 基于弹窗状态索引的颜色插值：展开（index=0）深色，收起（index=1）亮色
  const bgColor = bottomSheetRef.current?.animatedIndex.interpolate({
    inputRange: [0, 1],
    outputRange: ['#1a1a1a', '#f5f5f5'],
    extrapolate: 'clamp',
  });

  // 也可以用位置值插值（适合基于高度的拖拽）
  // const bgColor = bottomSheetRef.current?.animatedPosition.interpolate({
  //   inputRange: [screenHeight * 0.1, screenHeight * 0.9],
  //   outputRange: ['#f5f5f5', '#1a1a1a'],
  //   extrapolate: 'clamp',
  // });

  return (
    <View style={{ flex: 1 }}>
      {/* 自定义动画背景层 */}
      <Animated.View
        style={{
          position: 'absolute',
          inset: 0,
          backgroundColor: bgColor,
        }}
      />
      
      <BottomSheet
        ref={bottomSheetRef}
        index={0}
        snapPoints={['90%', '10%']}
        backdropComponent={() => null} // 禁用默认背景
      >
        {/* 弹窗内容 */}
        <View style={{ flex: 1, padding: 20, backgroundColor: 'white' }}>
          {/* 你的内容组件 */}
        </View>
      </BottomSheet>
    </View>
  );
};

export default CustomBottomSheet;

关键说明 #

• animatedIndex对应弹窗的snapPoints索引，比如index=0是完全展开状态，index=1是收起状态，根据你的snapPoints数量调整inputRange
• 如果需要更精细的位置控制，用animatedPosition，它返回弹窗顶部距离屏幕底部的像素值，结合屏幕高度计算对应范围
• 背景层必须放在弹窗之前，确保层级在下方
• 若需要透明度+固定深色的组合，可把backgroundColor设为固定深色，用插值控制opacity属性

内容的提问来源于stack exchange，提问作者Bartu Gençcan