在 iPhone X 上处理 ReactNative 中的 SafeArea

Question

在我的 ReactNative 应用程序中，我使用“SafeAreaView”来限制我在可见区域中的内容。我的应用程序以横向模式运行。看图

我的应用程序具有呈现 2 个项目的 FlatList。如果您注意到 FlatList（绿色），它在左侧有一些 20 像素的填充，在右侧，它有凹口（尽管它有 20 像素到边框的填充）。由于右边的缺口，我的 FlatList 似乎没有居中。
考虑到缺口区域，有没有办法处理内容大小？

Answer 1

尝试在 Flatlists 和 SafeAreaView 之间使用内部视图包装您的 Flatlists，并添加内部视图的填充，例如

<SafeAreaView style={{flex: 1}}>
  <View style={{flex: 1, padding: 24, justifyContent: 'center', alignItems: 'center'}}>
    {/* your flatlists here */}
  </View>
</SafeAreaView>

这应该使它看起来更自然。