如何处理 safeAreaView + React Navigation？

Question

第一个屏幕截图没有应用

SafeAreaView

，第二个屏幕截图正在应用

SafeAreaView

清楚地表明，与之前相比，

Stack header

显得笨重。无论如何，我们可以将

SafeAreaView

仅应用于底部吗？

Answer 1

对于 React Navigation v5，没有导出

SafeAreaView

。推荐的方法是使用 react-native-safe-area-context。

了解更多：React Navigation v5.x - 支持安全区域。

示例

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

function Demo() {
  return (
    <SafeAreaView
      style={{ flex: 1, justifyContent: 'space-between', alignItems: 'center' }}
    >
      <Text>This is top text.</Text>
      <Text>This is bottom text.</Text>
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>{/*(...) */}</NavigationContainer>
    </SafeAreaProvider>
  );
}

Answer 2

不要使用

SafeAreaView

中的

React-Native

，而是使用

SafeAreaView

中的

react-navigation

，如下所示：

import { SafeAreaView } from 'react-navigation';

然后你可以使用 prop

forceInset

来自定义填充，在你的情况下，

<SafeAreaView style={styles.safeArea} forceInset={{ top: 'never' }}>

有关更多信息，通过react-navigation查看 iPhone X 支持

Answer 3

如果您想忽略 safeAreaView 顶部的庞大填充，请传递 Edges 属性来控制填充。

<SafeAreaView style={styles.container} edges={['top', 'left', 'right']}>
  <Text style={styles.paragraph}>This is top text.</Text>
  <Text style={styles.paragraph}>This is bottom text.</Text>
</SafeAreaView>

在这里阅读更多相关信息

Answer 4

react-native 也有“SafeAreaView”，但这仅适用于 ios。

import { SafeAreaView } from "react-native";

所以用android设置SetAreaView，你使用StatusBar，它只在android中工作，它的currentHeight是24。

  <SafeAreaView style={{ flex: 1, marginTop: StatusBar.currentHeight }}>
    <View style={{ padding: 16, backgroundColor: "green" }}>
      <Text>Page content</Text>
    </View>
  </SafeAreaView>

Answer 5

在React navigation 6.x中，建议使用

useSafeAreaInsets

钩子（因为

SafeAreaView

仅支持iOS 10+）。

1. 用

   NavigationContainer

   包裹

   SafeAreProvider
2. 在顶层组件样式的填充中使用

   useSafeAreaInsets

注意示例中的填充块

        paddingTop: insets.top,
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,

import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

function Demo() {
  const insets = useSafeAreaInsets();

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'space-between',
        alignItems: 'center',

        // Paddings to handle safe area
        paddingTop: insets.top,
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
      }}
    >
      <Text>This is top text.</Text>
      <Text>This is bottom text.</Text>
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>{/*(...) */}</NavigationContainer>
    </SafeAreaProvider>
  );
}

参考：https://reactnavigation.org/docs/handling-safe-area/