React Native Navigation(v2)状态栏背景颜色设置问题求助

嘿，我之前折腾RN Navigation v2的时候也碰到过一模一样的问题——改了TopBar的背景色，结果状态栏完全没跟着变，想实现iOS那种视觉统一的效果确实得花点心思。下面分平台给你一步步说怎么做：

iOS 端实现同步 #

在iOS上，我们可以直接让状态栏的背景色和TopBar保持一致，或者让TopBar的背景延伸到状态栏区域。你只需要在屏幕的导航配置里同时设置topBar和statusBar的属性就行：

navigation.setRoot({
  root: {
    stack: {
      children: [
        {
          component: {
            name: '你的目标屏幕组件名',
            options: {
              topBar: {
                backgroundColor: '#2196F3', // 设置你的TopBar背景色
                title: {
                  text: '我的页面'
                }
              },
              statusBar: {
                backgroundColor: '#2196F3', // 和TopBar用同一个颜色值
                style: 'light' // 根据背景色选文字样式：light是白色，dark是黑色
              }
            }
          }
        }
      ]
    }
  }
});

另外，别忘了在iOS项目的Info.plist里把UIViewControllerBasedStatusBarAppearance设为YES，这样RN Navigation的状态栏配置才能正常生效，不然可能会被系统默认样式覆盖。

Android 端实现同步 #

Android的状态栏逻辑和iOS不太一样，得单独配置状态栏的背景色，还要注意translucent属性的设置：

options: {
  topBar: {
    backgroundColor: '#2196F3', // TopBar背景色
    title: {
      text: '我的页面'
    }
  },
  statusBar: {
    backgroundColor: '#2196F3', // 和TopBar保持同色
    style: 'light',
    translucent: false // 设为false才能让状态栏背景色显示出来，true的话状态栏会透明
  }
}

如果想全局统一设置，不用每个屏幕都写一遍，可以用Navigation.setDefaultOptions()来配置默认样式，所有屏幕都会自动继承：

Navigation.setDefaultOptions({
  topBar: {
    backgroundColor: '#2196F3'
  },
  statusBar: {
    backgroundColor: '#2196F3',
    style: 'light'
  }
});

小提醒 #

• 如果把statusBar.translucent设为true，状态栏会变成透明，TopBar会顶到屏幕最上方，这时候你得给页面内容加上paddingTop，不然内容会被状态栏挡住。
• 尽量用RN Navigation v2的最新稳定版，有些老版本可能存在状态栏配置的小bug，升级后说不定问题就自动解决了。

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