React Native中headerStyle设置marginTop:30无效触发警告如何解决？

React Navigation 框架的headerStyle配置项不支持marginTop属性，该属性会被框架内部忽略，因此会触发对应警告，样式无法生效。

根据你的实际需求选择对应处理方式即可：

• 需求为避开状态栏、避免导航栏内容被状态栏遮挡
  直接添加headerStatusBarHeight配置项即可，不需要手动声明marginTop，框架会自动适配状态栏高度，也支持自定义固定值，示例代码：

  defaultNavigationOptions:{
      // 也可以传入StatusBar.currentHeight直接读取系统状态栏高度，适配性更强
      headerStatusBarHeight: 30,
      headerStyle:{
          backgroundColor: Platform.OS === 'android' ? Colors.blue10: '',
      },
  }
  

• 需求为给导航栏整体添加额外的顶部间距
  把marginTop声明在headerContainerStyle配置项中即可，该属性控制导航栏外层容器的样式，支持margin类属性，示例代码：

  defaultNavigationOptions:{
      headerContainerStyle: {
          marginTop: 30
      },
      headerStyle:{
          backgroundColor: Platform.OS === 'android' ? Colors.blue10: '',
      },
  }
  

• 需求为调整导航栏内部元素（标题、返回按钮、右侧操作栏）的间距
  分别配置headerTitleStyle、headerLeftContainerStyle、headerRightContainerStyle来调整对应组件的margin、padding属性即可。

内容的提问来源于stack exchange，提问作者pavan kumar