(React native)如何将SafeAreaView用于Android缺口设备？

Question

我实际上正在开发一个带有本机反应的应用程序,我正在测试我的一加六并且它有一个缺口.SafeAreaView是iPhone X的解决方案,但对于Android,似乎没有解决方案.

有人听说过要解决这个问题吗？

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
    },
});

它的应用如下:

App.js

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

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

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

Answer 2

做类似的事情

import { StyleSheet, Platform, StatusBar } from "react-native";

export default StyleSheet.create({
  AndroidSafeArea: {
    flex: 1,
    backgroundColor: "white",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
  }
});

然后在您的App.js中

import SafeViewAndroid from "./components/SafeViewAndroid";

 <SafeAreaView style={SafeViewAndroid.AndroidSafeArea}>
          <Layout screenProps={{ navigation: this.props.navigation }} /> //OR whatever you want to render
        </SafeAreaView>

这应该工作得很好，因为get height将通过计算statusBar的高度来照顾android设备中的纽结，并且会相应地进行排列。

Answer 3

为了提高导入的一致性：

import { Platform, StatusBar } from "react-native";

然后像这样使用它：

paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0

Answer 4

您还可以像这样立即应用此样式来创建辅助组件

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

export default props => (
  <SafeAreaView style={styles.AndroidSafeArea} {...props} >
    {props.children}
  </SafeAreaView>
);

const styles = StyleSheet.create({
  AndroidSafeArea: {
    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0
  }
});

请注意，我还删除了不必要的样式，这些样式破坏了 SafeAreaView 的自然行为，在我的情况下破坏了样式。

至于使用，您只需像普通的 SafeAreaView 一样使用它：

import React from 'react';
import SafeAreaView from "src/Components/SafeAreaView";

render() {
    return (
      <SafeAreaView>
          // Rest of your app
      </SafeAreaView>
    );
  }
}

Answer 5

如果您在 2020 年看到此情况，并且还需要 Android 和 iOS 的网络支持，请在终端中输入此内容。 expo install react-native-safe-area-context 这将安装更新的安全区域上下文。然后将以下内容导入到您的app.js

import { SafeAreaView, SafeAreaProvider} from "react-native-safe-area-context";

添加<SafeAreaProvider>在 main 函数中的所有标签之前app.js，还要记住在最后关闭它。最后，view添加 ，而不是SafeAreaView。了解更多信息请访问博览会官方网站：SafeAreaContext

Answer 6

这是目前在 Android 和 ios 上为 vanilla RN 和 Expo 实现 SafeAreaView 的最佳或最简单的方法。

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

function SomeComponent() {
  return (
    <SafeAreaView>
      <View />
    </SafeAreaView>
  );
}

Answer 7

2020 年末回答：对于自己遇到此问题的任何人，他们都增加了对此的支持。

按照这个文档页面

Answer 8

尽管文档说它仅与 iOS 相关，但当我使用 React 的 SafeAreaView 时，它在 Android 上的不同屏幕上表现不同。

我通过实施我的 SafeAreaView 版本成功解决了该问题：

import React from "react";
import { Platform, View, StatusBar } from "react-native";
import { GeneralStyle } from "../styles";

export function SaferAreaView({ children }) {
  if (Platform.OS == "ios") {
    return <SaferAreaView style={{ flex: 1 }}>{children}</SaferAreaView>;
  }
  if (Platform.OS == "android") {
    return <View style={{flex: 1, paddingTop: StatusBar.currentHeight}}>{children}</View>;
  }
}

这是在旧设备（带硬件导航）和新刘海设备（带软件导航）上进行测试的 - 不同的屏幕尺寸。