react-native - 在 iPhone X 上处理 React Native 中的安全区域

Question

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


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

Answer 1

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

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

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