React Native 在 iOS 13 的深色模式下,适配 StatusBar 的 dark-content

React Native 2020-03-17 阅读 429 评论 0

问题描述

我的项目是 React Native 0.60.5,使用 StatusBar 的 barStyle 属性值 dark-content,在 IOS 13 的浅色模式或者 IOS 13 之前的版本一切正常,但是暗黑模式(Dark Mode)下没有效果,看起来跟设置成 light-content 一样,顶部状态栏都看不到了,如下图所示。

StatusBar 的 dark-content在ios 13的深色模式,如同没有设置一样

解决方案

可以有2种方法解决:

  1. 升级 React Native 到最新版本,最新版已经修复了这一问题,兼容 ios 13。
  2. 修改 React Native 项目的模块 RCTStatusBarManager.m 代码。

可以在 xcode 中编辑 Pods/Development Pods/React-Core/Modules/RCTStatusBarManager.m,或者编辑 node_modules/react-native/React/Modules/RCTStatusBarManager.m

RCT_ENUM_CONVERTER(UIStatusBarStyle, (@{
  @"default": @(UIStatusBarStyleDefault),
  @"light-content": @(UIStatusBarStyleLightContent),
  @"dark-content": @(UIStatusBarStyleDefault),
}), UIStatusBarStyleDefault, integerValue);

修改为

RCT_ENUM_CONVERTER(UIStatusBarStyle, (@{
  @"default": @(UIStatusBarStyleDefault),
  @"light-content": @(UIStatusBarStyleLightContent),
  @"dark-content": (@available(iOS 13.0, *)) ? @(UIStatusBarStyleDarkContent) : @(UIStatusBarStyleDefault),
}), UIStatusBarStyleDefault, integerValue);
最后更新 2020-03-17