safeAreaView + React Navigation 如何处理？

Question

第一个屏幕截图未应用 SafeAreaView，第二个屏幕截图应用 SafeAreaView

如图所示，Stack header 与之前相比显得笨重。无论如何我们可以将 SafeAreaView 应用于底部？

Answer 1

不要使用 React-Native 中的 SafeAreaView，而是使用 react-navigation 中的 SafeAreaView，如下所示：

import { SafeAreaView } from 'react-navigation';

然后你可以使用 prop forceInset 来自定义填充，在你的情况下，

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

更多信息，check out the iPhone X support by react-navigation

Answer 2

对于 React Navigation v5，没有 SafeAreaView 导出。推荐的方法是使用 react-native-safe-area-context.

阅读更多：React Navigation v5.x - Supporting safe areas.

示例

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 3

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

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

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

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

safeAreaView + React Navigation 如何处理？

How to deal with safeAreaView + React Navigation?

react-native

react-navigation

iphone-x