November 04, 2019
UIUserInterfaceStyle
をLight
にする。のどちらかで対応対応
react-native: 0.59.10 で
最近ビルドしてTestFlightで確認しようとしたら
iPhoneをDarkModeにしているとDarkModeがアプリに適用されて
StatsubarやDatePickerが見えなくなる状態になっていたので修正のメモ。
Alert | DatePicker |
---|---|
急にダークモードになってしまった原因としては、
BItrise側のStack(ビルドに使うOS)をVisual Studio for Mac, Stable Channel
にしていたので
最近ビルドしようとした際にXcode の VerがWeeklyUpdateで
Xcode 10.2.1 から Xcode 11.1
に上がっていたのが原因っぽい
bitrise/system_reports/osx-vs4mac-stable.log#L270
Xcode10台では何もしなくてもLightModeの状態でしかアプリビルドされない。っぽいので
のでXcode10.2のStackに戻してBuildする。↓
でも良かったが将来的に上げる羽目にはなるのでXcode11でもLightMode強制で動くように修正してみる。
issueにそれっぽいのがありUIUserInterfaceStyleをLightで解決する方法があったが
前回のUIUserInterfaceStyleをLightにするとAppStoreにアップロードできない でAppStoreへのアップロードした時に怒られて失敗していたがXcode11では行けるのでは無いかと思ったら予想通りビルドに成功した。
react-native/iOS 13 beta DatePickerIOS is invisible having dark mode enabled #26299
<key>UIUserInterfaceStyle</key>
<string>Light</string>
試しにXcode10.2でinfo.plistでUIUserInterfaceStyle
をLight
にするとAppStoreに上げる際にエラーになる模様。
この辺結構悩んでいたがXcodeのVersionの問題だったっぽい
package Summary:
1 package(s) were not uploaded because they had problems:
Error Messages:
ERROR ITMS-90190: "Invalid Info.plist Key. The key 'UIUserInterfaceStyle' in the Payload/hogehoge.appInfo.plist file is not valid."
2019-11-03 08:40:34.769 altool[12974:41156] *** Error: Errors uploading '/hogehoge.ipa': (
"Error Domain=ITunesTransporterErrorDomain Code=-18000 \"ERROR ITMS-90190: \"Invalid Info.plist Key. The key 'UIUserInterfaceStyle' in the Payload/hogehogeplist file is not valid.\"\" UserInfo={NSLocalizedRecoverySuggestion=ERROR ITMS-90190: \"Invalid Info.plist Key. The key 'UIUserInterfaceStyle' in the Payload/hogehoge.plist file is not valid.\", NSLocalizedDescription=ERROR ITMS-90190: \"Invalid Info.plist Key. The key 'UIUserInterfaceStyle' in the Payload/hogehoge.plist file is not valid.\", NSLocalizedFailureReason=ERROR ITMS-90190: \"Invalid Info.plist Key. The key 'UIUserInterfaceStyle' in the Payload/hogehoge.plist file is not valid.\"}"
)
Uploading IPA failed: exit status 1
が今度はDatePickerやAlertなどは正常にLightModeで表示されるがStatusbarだけdark-content
指定しているのに
<StatusBar barStyle="dark-content" />
白文字のままになってしまった。
(画像は全体に影入れているからStatusBar見えるが白い画面で見えなくなる)
ので下記issueを参考にreact-native/Status Bar Dark Content Not Working On iOS 13 Dark Mode #26619
node_modules/react-native/React/RCTStatusBarManager.m
RN0.59.10だと?
node_modules/react-native/React/Modules/RCTStatusBarManager.m
RCT_ENUM_CONVERTER(UIStatusBarStyle, (@{
@"default": @(UIStatusBarStyleDefault),
@"light-content": @(UIStatusBarStyleLightContent),
@"dark-content": @(UIStatusBarStyleDefault),
}), UIStatusBarStyleDefault, integerValue);
To Change:
から
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wunguarded-availability"
RCT_ENUM_CONVERTER(UIStatusBarStyle, (@{
@"default": @(UIStatusBarStyleDefault),
@"light-content": @(UIStatusBarStyleLightContent),
@"dark-content": (@available(iOS 13.0, *)) ? @(UIStatusBarStyleDarkContent) : @(UIStatusBarStyleDefault),
}), UIStatusBarStyleDefault, integerValue);
#pragma clang diagnostic pop
へ変更する。
react-nativeの中身を触る際には
ds300/patch-packageを使用して
$ yarn pacth-package
node_modules/react-nativeを編集する
$ yarn patch-package react-native
でpatch化して使うと楽
これは他のライブラリなどもforkせずに内部で完結するので楽でおすすめ。
でnode_modules/react-native/React/Modules/RCTStatusBarManager.m
を編集してからBuildするとXcode11でもStatusBarも黒い状態で表示される様になった。