如何避免状态栏内容重叠？

Question

我遇到一个问题，状态栏与我的应用程序内容重叠。

此：

这是App.js，其中包含我添加了SafeAreaView的顶级组件：

     <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
        <KeyboardAvoidingView
          style={styles.container}
          behavior="padding"
          enabled
        >
          <ReduxProvider store={store}>
            {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
            <AppNavigator />
          </ReduxProvider>
        </KeyboardAvoidingView>
      </SafeAreaView>

您在图像中看到的搜索栏组件有一个空白： <View style={{ marginTop: 22 }}>...可以在其他iOS设备上正常运行，但不能在新的iPhone（例如XR）上运行，例如屏幕截图上的设备。

那么，关于如何动态设置此边距以使状态栏不与UI内容重叠的任何想法？