Question

我实际上正在开发一个具有本机反应的应用程序，并且我正在测试我的plus 6。 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

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

关注this文档页面

Answer 4

如果您在 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 5

您还可以立即使用这种样式创建帮助器组件

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 6

为了更一致的导入：

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

然后像这样使用它：

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

Answer 7

在SafeAreaView Docs中被告知：

当前仅适用于具有iOS 11或更高版本的iOS设备。

所以现在我肯定在我的项目中使用它，但是我使用Platform来识别设备平台，对于Android，我为状态栏设置了一个手动安全区域。

Answer 8

您可以使用react-native-device-info来获取设备信息，也可以使用带有样式的样式

Answer 9

您可以使用expo常量来代替使用Platform API。

npm i expo-constants

然后将其导入您的组件中

import Constants from "expo-constants"

然后在样式中可以像这样使用它

const styles = StyleSheet.create({
container: {
paddingTop: Constants.statusBarHeight
} });

要查看Constants控制台日志的所有属性，您会发现一些更有用的东西。

Answer 10

尽管文档说它仅与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>;
  }
}

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

Answer 11

嗯，我遇到了同样的问题。我使用这个lib React Native Status Bar Height解决了这个问题，我建议使用它，因为这是小菜一碟。
而且，如果您使用的是样式组件，则可以像我在下面的示例中所做的那样，在styles.js中添加getStatusBarHeight()：

import styled from 'styled-components/native';

import { getStatusBarHeight} from 'react-native-status-bar-height';

export const Background = styled.View`
 flex:1;
 background:#131313;
 margin-top: ${getStatusBarHeight()};

`

Answer 12

Expo 解决方案（docs - 仅限安卓）：

import { setStatusBarTranslucent } from 'expo-status-bar';

然后在组件中你可以使用 useEffect 钩子：

  useEffect(() => {
    setStatusBarTranslucent(false)
  },[])

对于 iOS，您可以使用 react-native 中的 <SafeAreaView> 组件。

（本机反应）如何将SafeAreaView用于Android陷波设备？

12 个答案: