在 iPhone X 上处理 React Native 中的安全区域答案

【问题标题】：Handling SafeArea in ReactNative on iPhone X在 iPhone X 上处理 React Native 中的安全区域
【发布时间】：2020-06-21 06:45:38
【问题描述】：

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

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

【问题讨论】：

你可以在这里添加代码吗？
如果您只关心带有凹槽的 iPhone，那么您可以将凹槽和底栏的差异添加到底栏边距/填充以使平面列表居中。

标签： react-native react-native-flatlist iphone-x

【解决方案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>

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

【讨论】：

它不会在 iPhone X 中居中，因为它有一个缺口。它会在有缺口的一侧显示不均匀。
在这种情况下，尝试使用 react-native-safe-area-context 中的 useSafeAreaInsets -> const paddingRight = useSafeAreaInsets().right + 24;

【解决方案2】：

对于 iOS，你可以使用这个包：https://www.npmjs.com/package/react-native-iphone-x-helper

getBottomSpace() 和 getStatusBarHeight()

【讨论】：