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

Question

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

我简化了一个屏幕，所以您可以在此处看到问题:

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

    </View>
</SafeAreaView>

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

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 用于带 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-context API 的更多详细信息 here