如何处理safeAreaView + React Navigation？

Question

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

清楚地表明，Stack header与以前相比显得笨重。无论如何，我们只能将SafeAreaView应用于底部吗？

Answer 1

对于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 2

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

import { SafeAreaView } from 'react-navigation';

然后，您可以使用道具forceInset自定义填充，具体取决于您的情况

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

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

Answer 3

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

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

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

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