如何为 Android 缺口设备使用 SafeAreaView？

Question

我正在使用 React Native 开发一个应用程序，我正在使用我的 OnePlus 6 进行测试，它有一个缺口。 SafeAreaView 是 iPhone X 的解决方案，但对于 Android，似乎没有解决方案。

如何解决此类问题？

原文由 Thomas Desdoits 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我最近不得不使用的一个解决方法：

GlobalStyles.js：

 import { StyleSheet, Platform } from 'react-native';
export default StyleSheet.create({
    droidSafeArea: {
        flex: 1,
        backgroundColor: npLBlue,
        paddingTop: Platform.OS === 'android' ? 25 : 0
    },
});

它是这样应用的：

应用程序.js

 import GlobalStyles from './GlobalStyles';
import { SafeAreaView } from "react-native";

render() {
    return (
      <SafeAreaView style={GlobalStyles.droidSafeArea}>
          //More controls and such
      </SafeAreaView>
    );
  }
}

您可能需要稍微调整一下以适应您正在处理的任何屏幕，但这让我的标题位于顶部图标条的下方。

原文由 Zexks Marquise 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我使用 StatusBar 来自 react-native 而不是 expo-status-bar 这对我的 OnePlus 以及其他 Android 设备都有效。

 import { StatusBar } from 'react-native';

原文由 Kumar Mritrunjay 发布，翻译遵循 CC BY-SA 4.0 许可协议