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

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

这：

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

{Platform.OS==='ios'&&}

您在图像中看到的搜索栏组件具有边距：

…

可以在其他iOS设备上正常工作，但不能在新的iPhone上正常工作，例如屏幕截图上的设备XR

---

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

刚刚引用了我使用相同设置的最近项目，我在代码中看到的唯一区别是，

SafeAreaView

的第一个子项将其样式设置为

marginTop:30

我不确定这是否能解决您的问题，只是想分享我的设置。我已经离开了这个项目，所以它实际上可能对你没有帮助。我最近遇到了这个问题。我不确定您的其他配置，如路由器和索引文件，但将SafeAreaView置于顶层对我不起作用。它在组件级别运行良好。因此，为了使SafeAreaView可用于所有其他组件，我必须创建一个包含SafeAreaView的组件，并使用HOC包装所有其他组件。如果您使用Expo，请尝试使用Constants.statusBarHeight设置marginTop。刚才引用了我使用相同设置的最近项目，我在代码中看到的唯一区别是，

SafeAreaView

的第一个子项将其样式设置为

marginTop:30

我不确定这是否能解决您的问题，只是想分享我的设置。我已经离开了这个项目，所以它实际上可能对你没有帮助。我最近遇到了这个问题。我不确定您的其他配置，如路由器和索引文件，但将SafeAreaView置于顶层对我不起作用。它在组件级别运行良好。因此，为了使SafeAreaView可用于所有其他组件，我必须创建一个包含SafeAreaView的组件，并使用HOC包装所有其他组件。如果您使用Expo，请尝试使用Constants.statusBarHeight设置marginTop。

     <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>