React Native 中如何正确适配 iOS 和 Android 的状态栏高度差异？

雨晨（打工版）提问于 2026-03-21 11:20:22 阅读 16

框架

我在用 React Native 开发一个跨端 App，发现 iOS 和 Android 的状态栏高度不一样，导致页面顶部布局错乱。试过用 SafeAreaView 包裹，但在某些 Android 机型上还是会有遮挡。

也查了文档，看到可以用 StatusBar.currentHeight 获取 Android 状态栏高度，但 iOS 上这个值是 undefined。有没有一种统一的方案能自动适配两个平台的状态栏？或者是不是我用 SafeAreaView 的方式不对？

目前我的写法大概是这样：

import { SafeAreaView, StatusBar, Platform } from 'react-native';

const MyScreen = () => (
  <SafeAreaView style={{ flex: 1, paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 }}>
    {/* 内容 */}
  </SafeAreaView>
);

我来解答赞 1 收藏

反馈

1 条解答

公孙智慧 Lv1

试试这个，用 react-native-safe-area-context 库来处理，它会自动适配不同平台的状态栏高度。

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



const MyScreen = () => (

  

    {/* 内容 */}

  

);

2026-03-21 12:00