Как работать с safeAreaView + React Navigation?

Question

Первый снимок экрана был без применения SafeAreaView, а второй снимок экрана применял SafeAreaView

Как ясно показано, Stack header кажется громоздким по сравнению с предыдущим.Есть ли в любом случае, где мы можем применить SafeAreaView только к нижней части?

Answer 1

Вместо использования SafeAreaView из React-Native, используйте SafeAreaView из react-navigation, как показано ниже:

import { SafeAreaView } from 'react-navigation';

Затем вы можете использовать prop forceInset, чтобы настроить отступ, который в вашемcase,

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

Для получения дополнительной информации, проверьте поддержку iPhone X с помощью response-navigation