时间戳

首页 > 解决方案 > SafeAreaView 导致屏幕上出现奇怪的间隙

javascript - SafeAreaView 导致屏幕上出现奇怪的间隙

问题描述

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

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

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

    </View>
</SafeAreaView>

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

屏幕底部的奇怪间隙

标签： javascriptiosreact-nativesafeareaview

解决方案

问题可能与导航组件中的 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 的功能组件

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-contextAPI的更多详细信息，请单击此处

推荐阅读