Android设备React Native Bottom Sheet吸附点计算适配问题

问题成因 #

Android设备上出现计算逻辑不通用的核心原因是**useSafeAreaInsets()返回的top值是否包含状态栏高度，取决于App是否启用沉浸式状态栏**：

• 开启沉浸式状态栏（StatusBar.translucent = true）时，top值就是状态栏高度，此时额外叠加StatusBar.currentHeight会导致重复计算，底部Sheet被向上多推一段距离。
• 未开启沉浸式状态栏时，top值为0，此时需要手动添加StatusBar.currentHeight才能让Sheet顶到状态栏下方。
• 部分设备的刘海屏、系统全屏模式配置也会影响该值的返回逻辑。

解决方案 #

方案1：动态判断，避免重复计算 #

通过判断SafeAreaInsets的top值是否大于0，决定是否额外添加状态栏高度，确保所有设备计算逻辑一致：

import React, {useMemo, useRef} from 'react';
import {View, StatusBar} from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';
import {useSafeAreaInsets, useWindowDimensions} from 'react-native-safe-area-context';

const sheetStartSnap = 200;

const Screen = () => {
    const {top, bottom} = useSafeAreaInsets();
    const {height: windowHeight} = useWindowDimensions(); // 替代Dimensions.get，自动响应屏幕尺寸变化
    const ref = useRef < BottomSheet > null;

    const sheetEndSnap = useMemo(() => {
        // 实际顶部偏移：safe area已提供top值则直接用，否则取状态栏高度
        const actualTopOffset = top > 0 ? top : (StatusBar.currentHeight || 0);
        return windowHeight - (actualTopOffset + bottom);
    }, [top, bottom, windowHeight]);

    const snapPoints = useMemo(() => [sheetStartSnap, sheetEndSnap], [sheetEndSnap]);

    return (
        <View style={{flex: 1}}>
            <BottomSheet ref={ref} index={0} snapPoints={snapPoints}>
                <View style={{flex: 1}} />
            </BottomSheet>
        </View>
    );
};

方案2：统一App状态栏配置（推荐） #

全局开启沉浸式状态栏，让useSafeAreaInsets()的top值在所有Android设备上都正确返回状态栏高度，无需额外处理StatusBar.currentHeight：

在根组件（如App.tsx）中添加配置：

import { StatusBar } from 'react-native';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 开启沉浸式状态栏
    StatusBar.setTranslucent(true);
    // 设置状态栏背景透明（可根据UI需求调整）
    StatusBar.setBackgroundColor('transparent');
    // 适配状态栏文字颜色（浅色背景下用深色文字）
    StatusBar.setBarStyle('dark-content');
  }, []);

  // ...其他组件内容
}

之后Screen组件的计算逻辑可简化为：

const sheetEndSnap = useMemo(() => {
  return windowHeight - (top + bottom);
}, [top, bottom, windowHeight]);

额外注意点 #

• 使用useWindowDimensions()替代Dimensions.get('window')，前者会在屏幕旋转、窗口尺寸变化时自动更新，避免Sheet尺寸出错。
• 测试时覆盖不同类型Android设备：刘海屏/非刘海屏、全屏/常规模式设备，确保适配逻辑生效。

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