How to deal with safeAreaView + React Navigation?

问题

First screenshot was without applying SafeAreaView and second screenshot is applying SafeAreaView

As shown clearly that Stack header seems bulky as compare to previously. Is there anyway where we can apply SafeAreaView to only bottom part?

回答1:

Instead of using SafeAreaView from React-Native, use SafeAreaView from react-navigation as below:

import { SafeAreaView } from 'react-navigation';

Then you can use prop forceInset to customize the padding, which in your case,

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

For more information, check out the iPhone X support by react-navigation

回答2:

For React Navigation v5, there is no SafeAreaView exported. The recommended way is to use react-native-safe-area-context.

Read more: React Navigation v5.x - Supporting safe areas.

Example

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

来源：https://stackoverflow.com/questions/53476125/how-to-deal-with-safeareaview-react-navigation