React Native在Galaxy S9上useSafeAreaInsets上下内边距为0的问题求助

问题复现 #

Galaxy S9设备上useSafeAreaInsets()返回的top、bottom内边距均为0，导致自定义底部导航栏与系统底部导航栏重叠；Pixel 3a等设备可正常获取Insets值。

检查react-native-safe-area-context配置与版本 #

• 确保依赖为最新版：执行npm update react-native-safe-area-context或yarn upgrade react-native-safe-area-context
• Android项目配置调整：
  在android/app/src/main/res/values/styles.xml的AppTheme节点添加：

  <item name="android:windowDrawsSystemBarBackgrounds">true</item>
  <item name="android:windowTranslucentNavigation">false</item>
  

• 确认initialWindowMetrics初始化正确：

  import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
  
  function App() {
    return (
      <SafeAreaProvider initialMetrics={initialWindowMetrics}>
        {/* 应用核心内容 */}
      </SafeAreaProvider>
    );
  }
  

设备型号兜底适配 #

针对Galaxy S9手动设置底部内边距（该设备底部导航栏标准高度为48dp）：

import { Platform, Dimensions } from 'react-native';

const isGalaxyS9 = Platform.OS === 'android' && /SM-G960/.test(Dimensions.get('window').model);
const fallbackBottomInset = isGalaxyS9 ? 48 : 0;

const insets = useSafeAreaInsets();
const actualBottomInset = insets.bottom || fallbackBottomInset;

// 后续tabBarStyle中使用actualBottomInset替代insets.bottom

替换自定义容器为原生SafeAreaView #

移除ScreenContainer，改用react-native-safe-area-context提供的SafeAreaView包裹导航组件：

import { SafeAreaView } from 'react-native-safe-area-context';

// ...

return (
  <SafeAreaView style={{ flex: 1 }}>
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, size }) => (
          <BottomTabIcon focused={focused} route={route} size={size * 1.1} />
        ),
        tabBarLabel: ({ focused }) => <BottomTabTitle routeName={route.name} focused={focused} />,
        tabBarShowLabel: false,
        headerShown: false,
        tabBarStyle: {
          backgroundColor: colors.beige.primary,
          height: bottomBarConfig.height + actualBottomInset,
          paddingBottom: actualBottomInset,
        },
      })}
    >
      {/* 页面路由配置 */}
    </Tab.Navigator>
  </SafeAreaView>
);

排查自定义ScreenContainer逻辑 #

ScreenContainer safeAreaMode="bottom"可能内部拦截了Insets传递，尝试注释该组件，直接渲染导航栏，观察useSafeAreaInsets()返回值是否恢复正常。

原生层兜底方案 #

若以上方法无效，通过Android原生代码获取导航栏高度并传递给RN：

1. 原生Module实现：

   // android/app/src/main/java/[你的包名]/NavigationBarModule.java
   import com.facebook.react.bridge.ReactApplicationContext;
   import com.facebook.react.bridge.ReactContextBaseJavaModule;
   import com.facebook.react.bridge.ReactMethod;
   import com.facebook.react.bridge.Promise;
   import android.content.res.Resources;
   
   public class NavigationBarModule extends ReactContextBaseJavaModule {
     public NavigationBarModule(ReactApplicationContext reactContext) {
       super(reactContext);
     }
   
     @Override
     public String getName() {
       return "NavigationBarModule";
     }
   
     @ReactMethod
     public void getNavigationBarHeight(Promise promise) {
       Resources resources = getReactApplicationContext().getResources();
       int resourceId = resources.getIdentifier("navigation_bar_height", "dimen", "android");
       int height = resourceId > 0 ? resources.getDimensionPixelSize(resourceId) : 0;
       promise.resolve(height);
     }
   }
   

2. 在RN中调用获取高度：

   import { NativeModules } from 'react-native';
   
   // 在组件中使用
   useEffect(() => {
     NativeModules.NavigationBarModule.getNavigationBarHeight()
       .then(height => {
         // 使用获取到的高度作为兜底值
       })
       .catch(err => console.error(err));
   }, []);
   

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