安全区域视图在屏幕上造成奇怪的间隙。

Question

我在我的React Native应用程序的屏幕上出现了一些奇怪的间隙。

我简化了一个屏幕，这样您就可以看到问题:

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

    </View>
</SafeAreaView>

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

- Simon Degn

Answer 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>

使用钩子的功能组件的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的更多详细信息，请在这里查看。

- imKrishh

---

嘿，ImKrishh，感谢您的精彩回复 :-)我认为您关于导航冲突和safeaareaviews的观点是正确的。我尝试了您的第一个建议，使用react-native-safe-area-context一切都很完美，没有底部边缘。我已经接受了您的答复作为我的问题的答案，并且您赢得了奖励;-) - Simon Degn