SafeAreaView 导致屏幕上出现奇怪的间隙答案

【问题标题】：The SafeAreaView causes weird gap on screenSafeAreaView 导致屏幕上出现奇怪的间隙
【发布时间】：2021-05-22 14:04:50
【问题描述】：

我的 React Native 应用程序的屏幕上开始出现一些奇怪的空白。

我已经简化了一个屏幕，所以您可以在这里看到问题：

<SafeAreaView style={{flex:1, backgroundColor: 'yellow'}}>
    <View style={{flex: 1, backgroundColor: 'green'}}>

    </View>
</SafeAreaView>

当我进入后台模式并重新打开应用程序（在 iPhone 12 上快速滑动手势）时，问题消失了。见例子：

【问题讨论】：

标签： javascript ios react-native safeareaview

【解决方案1】：

问题可能在于导航组件中的冲突 SafeAreaView。您可以像这样跳过 SafeArea 的底部填充，

import {SafeAreaView} from 'react-native-safe-area-context';

<SafeAreaView
  edges={['right', 'top', 'left']}
  style={{flex: 1, backgroundColor: 'yellow'}}>
    <View style={{flex: 1, backgroundColor: 'green'}}></View>
</SafeAreaView>

带有 Hooks 的功能组件的 OR

import { useSafeAreaInsets } from 'react-native-safe-area-context';

const insets = useSafeAreaInsets();

 <View
   style={{
     paddingTop: Math.max(insets.top, 16),
     flex: 1,
     backgroundColor: 'yellow',
   }}>
   <View style={{flex: 1, backgroundColor: 'green'}}></View>
 </View>

有关react-native-safe-area-context API 的更多详细信息here

【讨论】：

嘿 ImKrishh，感谢您的精彩回复 :-) 我认为您对冲突的导航和安全区域视图是正确的。我尝试了你的第一个建议，一切都像一个带有 react-native-safe-area-context 并且没有底部边缘的魅力。我接受了你的回复作为我问题的答案，你已经获得了赏金;-)