web-dev-qa-db-ja.com

Cordovaを使用してiOSのステータスバーを完全に非表示にする方法

開発中のCordovaアプリのステータスバーを表示したくない。私はほとんどそこにいます、スプラッシュスクリーンにステータスバーが表示されません。ただし、ロードする最初のページでは、ステータスバーが非表示になる前にフラッシュが表示されます。

Xcodeの「ステータスバーを隠す」チェックボックスをチェックしました。

_cordova-plugin-statusbar_プラグインを追加し、devicereadyコールバックでStatusBar.hide()を呼び出しています。

ただし、スプラッシュ画像が消えて最初のページがレンダリングされると、ページが表示される前にステータスバーが点滅します。それは一瞬だけですが、ひどく見えます。

ステータスバーが非表示になる前にフラッシュせずに完全に非表示にする方法を知っている人はいますか?

29
Geoff Smith

元の回答

私はこの質問に非常に遅れて答えていますが、検索の1日後には、これがうまくいったので、他の人と共有したいと思います。

docs (および jcesarmobile 回答済み)によると:

起動時に非表示にする

実行時に以下のStatusBar.hide関数を使用できますが、アプリの起動時にStatusBarを非表示にするには、アプリのInfo.plistファイルを変更する必要があります。

これらの2つの属性が存在しない場合は、追加/編集します。 「ステータスバーは最初は非表示」を「YES」に設定し、「コントローラーベースのステータスバーの外観を表示」を「NO」に設定します。 Xcodeなしで手動で編集する場合、キーと値は次のとおりです。

そのためには、アプリのinfo.plistファイルをplatforms/ios/<app-name>/<app-name>-Info.plistファイル内で変更して、次の行を追加する必要があります。

<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

ただし、ビルドプロセス後に上書きされる可能性のある変更を保存する必要があるため、お勧めしません。

(最新のCordova CLIを使用している場合は、ここからアップデート2を参照してください)

したがって、クリーンな代替手段として cordova-custom-config を使用する必要があります。ドキュメントによると:

なぜ使用する必要があるのですか?

一部のプラットフォーム設定は、config.xmlのCordova/Phonegapを介して設定できますが、多く(特に新しいプラットフォームリリースに関連するもの)は設定できません。 1つの解決策は、platforms /ディレクトリの構成ファイルを手動で編集することですが、これは複数の開発マシンまたは後続のビルド操作が変更を上書きする可能性のあるCI環境で維持できません。

このプラグインは、準備操作の完了後に追加のプラットフォーム固有の設定を許可し、Cordovaによって設定された設定をオーバーライドするか、他の未指定の設定を設定できるようにすることで、このギャップに対処しようとします。カスタム設定はconfig.xmlに入力されるため、バージョン管理にコミットして複数の開発マシン、CI環境に適用し、ビルド間またはプラットフォームが削除および再追加された場合でも維持できます。

今、あなたがしなければならないことは、あなたのCordovaアプリに対して次のコマンドを実行することです:

cordova plugin add cordova-custom-config --save

そして、これをconfig.xmlブロックの下の<platform name="ios">ファイルに追加します。

詳細については、 cordova-custom-config (バージョン> 5)プラグインを参照してください

<custom-config-file parent="UIStatusBarHidden" platform="ios" target="*-Info.plist">
    <true/>
</custom-config-file>
<custom-config-file parent="UIViewControllerBasedStatusBarAppearance" platform="ios" target="*-Info.plist">
    <false/>
</custom-config-file>

アップデート1(2018年2月20日)

Cordova-custom-configプラグインバージョン<5を使用している場合は、custom-config-fileタグをconfig-fileに置き換えます。

https://github.com/dpa99c/cordova-custom-config#changes-in-cordova-custom-config5

更新2(2018年7月6日)

Cordova CLI 6以降、cordova-custom-configファイルを変更するためにplatforms/ios/*-info.plistプラグインをインストールする必要がなくなりました。 Cordova CLIには、edit-configタグを使用した組み込みのサポートがあります。したがって、config.xmlの下の<platform name="ios">に以下を追加するだけです。

<edit-config file="*-Info.plist" mode="merge" target="UIStatusBarHidden">
    <true />
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="UIViewControllerBasedStatusBarAppearance">
    <false />
</edit-config>

この変更は、platform/ios/ios.jsonファイルと競合するため、Cordovaアプリケーションのビルド時に失敗する場合があります。これを修正するには、2つのオプションがあります( reference ):

オプション1(過剰だが機能している)

IOSプラットフォームを再度追加します。

ionic cordova platform remove ios
ionic cordova platform add ios

https://issues.Apache.org/jira/browse/CB-13564

オプション2(推奨されますが、私には機能しません)

platform/ios/ios.jsonファイルで*-Info.plistの代わりにedit-configを使用します。したがって、追加する必要のある最終構成:

<edit-config file="platforms/ios/ios.json" mode="merge" target="UIStatusBarHidden">
    <true />
</edit-config>
<edit-config file="platforms/ios/ios.json" mode="merge" target="UIViewControllerBasedStatusBarAppearance">
    <false />
</edit-config>

それから:

cordova prepare ios
50

編集:

Cordova CLI 6.5.0以降では、edit-configプラグインなしでinfo.plistに書き込むタグ。これにより、起動時にステータスバーが非表示になります

<edit-config file="*-Info.plist" target="UIStatusBarHidden" mode="merge">
    <true/>
</edit-config>
<edit-config file="*-Info.plist" target="UIViewControllerBasedStatusBarAppearance" mode="merge">
    <false/>
</edit-config>

起動時に非表示にする

実行時に以下のStatusBar.hide関数を使用できますが、アプリの起動時にStatusBarを非表示にするには、アプリのInfo.plistファイルを変更する必要があります。

これらの2つの属性が存在しない場合は、追加/編集します。 「ステータスバーは最初は非表示」を「YES」に設定し、「コントローラーベースのステータスバーの外観を表示」を「NO」に設定します。 Xcodeなしで手動で編集する場合、キーと値は次のとおりです。

<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

https://github.com/Apache/cordova-plugin-statusbar

15
jcesarmobile

この方法は私に役立ちました:

MacまたはVM xcodeで、TARGETS-> Your appを選択します

次に、INFOメニューのCUSTOM iOS TARGET PROPERTIESで、この新しいプロパティを追加します。

ステータスバーは最初は非表示です->次に、値をYESに設定します。

コントローラーベースのステータスバーの外観を表示->次に、値をNOに設定します

ビルドすると、ステータスバーは表示されません。

printscreen: http://prntscr.com/fg0jtf

1
Web Developer

Androidでも同じ問題が発生していました。 'appCtrl' init()関数から以下のstatusBar()関数を呼び出すだけで解決しました。

IOSで機能することを願っています。

 $rootScope.statusBar = function(){
        document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    //console.log(StatusBar);
    StatusBar.hide();
}
0
Ronit Roy

このプラグインを確認してください Cordovaでのステータスバーのカスタマイズ

0