Ionic 3 iPhone X 打开系统相册时状态栏隐藏问题及解决需求

Hey there! I’ve run into this exact problem while building Ionic 3 apps for iPhone X, so I’ve got a couple of proven solutions to keep that status bar visible when the system photo picker opens.

1. Use Cordova Status Bar Plugin to Manual Control #

First, make sure you have the cordova-plugin-statusbar installed (it’s usually included by default, but double-check):

ionic cordova plugin add cordova-plugin-statusbar
npm install @ionic-native/status-bar

Then, in your component where you trigger the gallery picker, add code to force the status bar to show before opening the picker, and restore your app’s default status bar behavior after the picker closes:

import { StatusBar } from '@ionic-native/status-bar';
import { ImagePicker } from '@ionic-native/image-picker'; // Or your preferred media picker plugin

constructor(
  private statusBar: StatusBar,
  private imagePicker: ImagePicker
) {}

openSystemGallery() {
  // Force status bar to show and disable overlay before opening gallery
  this.statusBar.show();
  this.statusBar.overlaysWebView(false);
  // Match your app's status bar color to keep consistency
  this.statusBar.backgroundColorByHexString('#2196F3'); 

  // Configure your gallery options
  const galleryOptions = {
    maximumImagesCount: 1,
    outputType: 1 // Adjust based on your needs
  };

  this.imagePicker.getPictures(galleryOptions).then(results => {
    // Handle your selected photos here
    console.log('Selected photos:', results);

    // Restore your app's default status bar settings after picker closes
    this.statusBar.overlaysWebView(true); // Change this if your app doesn't use overlay
  }, error => {
    // Don't forget to restore settings even if there's an error
    console.error('Gallery error:', error);
    this.statusBar.overlaysWebView(true);
  });
}

2. Tweak Config.xml for iPhone X Specifics #

Add these preferences to your config.xml to ensure proper status bar behavior on iPhone X:

<platform name="ios">
  <!-- Keep status bar visible by default -->
  <preference name="StatusBarHidden" value="false" />
  <!-- Set status bar style (lightcontent works for dark backgrounds) -->
  <preference name="StatusBarStyle" value="lightcontent" />
  <!-- Enable viewport fit for iPhone X notch support -->
  <preference name="viewport-fit" value="cover" />
  <!-- Match your app's primary color for status bar background -->
  <preference name="StatusBarBackgroundColor" value="#2196F3" />
</platform>

3. Verify Native iOS Settings (If Needed) #

If the above steps don’t work, you can check your iOS project’s Info.plist to ensure no conflicting settings:

• Make sure UIStatusBarHidden is set to NO
• Set UIViewControllerBasedStatusBarAppearance to YES (this lets Cordova/Ionic control the status bar via code)

These steps should keep the status bar visible when opening the system gallery on iPhone X, matching the simulator’s default display.

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