如何处理 safeAreaView + React Navigation? [英] How to deal with safeAreaView + React Navigation?

问题描述

第一个屏幕截图没有应用SafeAreaView，第二个屏幕截图应用了SafeAreaView

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

清楚地表明，与以前相比，Stack header 看起来很笨重.无论如何，我们可以将 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?

推荐答案

不要使用 React-Native 中的 SafeAreaView，而是使用 SafeAreaViewreact-navigation 如下:

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

import { SafeAreaView } from 'react-navigation';

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

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

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

欲了解更多信息，通过 react-navigation 查看 iPhone X 支持

这篇关于如何处理 safeAreaView + React Navigation?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！