从PhoneGap Camera API返回时如何隐藏iOS7状态栏?

Posted

技术标签:

【中文标题】从PhoneGap Camera API返回时如何隐藏iOS7状态栏?【英文标题】:How do I hide the iOS7 status bar when returning from PhoneGap Camera API? 【发布时间】:2014-06-05 12:36:41 【问题描述】:

我在使用 Cordova/Phonegap 为 ios7 构建应用程序时遇到了一个问题。 iOS7 的状态栏我不能很好地隐藏。

最初我进入 Xcode 中的 plist 并添加了所有正确的设置以使状态栏不可见,就像在这个解决方案 Cannot hide status bar in iOS7 中一样。

这很好用,直到我遇到了 Cordova CAMERA API 的障碍。当我让我的应用程序进入相机胶卷以选择图像(然后将其插入屏幕)时。选择图像并返回应用程序后,状态栏再次可见。

我已经安装了状态栏 cordova 插件,并且我试图在状态栏从相机设备返回到我的应用程序后立即隐藏它。惊喜 - 它不起作用!但是,我可以启用一个按钮,该按钮调用一个函数以在单击时隐藏状态栏 - 但我希望它自动发生。

我在下面插入了我的代码:

<div id="Ccamera-fun" data-role="page" data-title="Camera Fun Activity">
  <div data-role="header" data-theme="e">
      <a href="#" data-rel="back" data-theme="h" data-icon="arrow-l" data-direction="reverse">Back</a>
      <h1>3.5 years - 4.5 years</h1>
  </div>
  <div data-role="content" data-theme="a" class="content">
   <h1>Camera Fun</h1>
   <div id="imageContainer"></div>
   <p>Use your photos and ask your child to describe one in detail. Use your photos as picture talks where your child can share their memories and recall events before or after the photo was taken. <strong>Together you could invent their own story.</strong></p>
    <p>Use the buttons below to take a picture with your phone or select an image from your phone&rsquo;s Photo Library. Once you have selected a photo, it will be embedded into the top of this screen.</p>
<script type="text/javascript" charset="utf-8">
    function hideStatus() 
     StatusBar.hide(); 
     navigator.notification.alert("status bar hidden");
    

    function takePhoto() 
        navigator.camera.getPicture(onCameraSuccess,                            
        onCameraError,
        quality: 50,
         destinationType : Camera.DestinationType.FILE_URI);
    
    function onCameraSuccess(imageURL) 
        //HIDE STATUS BAR IMAGE
        StatusBar.hide();
        //GET A HANDLE TO THE IMAGE CONTAINER DIV
        ic = document.getElementById('imageContainer');
        //THEN WRITE AN IMAGE TAG OUT TO THE DIV USING THE URL WE RECEIVED FROM CAMERA APPLICATION
        ic.innerhtml = '<img src="' + imageURL + '"  />';
        navigator.notification.alert("onCameraSuccess:" + imageURL);
    
    function onCameraError(e) 
        console.log(e);
        navigator.notification.alert("onCameraError:" + e);
    
    function fromAlbum() 
        navigator.camera.getPicture(onLibrarySuccess,                            
        onLibraryError,
        quality: 50,
         sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
         allowEdit : true,
         destinationType : Camera.DestinationType.FILE_URI);
    
    function onLibrarySuccess(imageURL) 
        //GET A HANDLE TO THE IMAGE CONTAINER DIV
        ic = document.getElementById('imageContainer');
        //THEN WRITE AN IMAGE TAG OUT TO THE DIV USING THE URL WE RECEIVED FROM CAMERA APPLICATION
        ic.innerHTML = '<img src="' + imageURL + '"  />';
        navigator.notification.alert("onCameraSuccess:" + imageURL);
    
    function onLibraryError(e) 
        console.log(e);
        navigator.notification.alert("onCameraError:" + e);
    
</script>
   <button onclick="takePhoto();" data-theme="h">Take a Picture</button>
   <button onclick="fromAlbum();" data-theme="h">Choose a Picture</button>
   <button onclick="hideStatus();" data-theme="h">Hide status bar</button>
 </p>
  </div>
</div>

如果有人能告诉我哪里出了问题,我将不胜感激。

谢谢

【问题讨论】:

【参考方案1】:

这是一个phonegap bug,请参考CB-5265:

你可以通过添加来解决这个问题

 [[UIApplication sharedApplication] setStatusBarHidden:YES];

到位于 CDVCamera.m 中的 imagePickerController:didFinishPickingMediaWithInfo: 结尾

但是,上面的代码只是给你一个快速修复,没有全面考虑,你应该自己测试一下。

希望对你有帮助!

【讨论】:

谢谢@Imnbeyond!这在 Xcode 中对我有用。我会密切关注代码,看看它是否会影响我应用中的其他任何内容。【参考方案2】:

Imnbeyond 的解决方案对我不起作用。 我不得不进入我的 plist,改变

View controller-based status bar appearance = YES

然后通过覆盖每个视图控制器中的方法 prefersStatusBarHidden 来控制我的视图控制器中的状态栏,

-(BOOL)prefersStatusBarHidden
    return YES;

【讨论】:

以上是关于从PhoneGap Camera API返回时如何隐藏iOS7状态栏?的主要内容,如果未能解决你的问题,请参考以下文章

Phonegap Camera API - 无法读取未定义的属性“DATA_URL”

我如何从 PhoneGap camera.getPicture 获取 File 对象?

我如何从PhoneGap camera.getPicture获取File对象?

PhoneGap 相机 API 不适用于 iOS

Phonegap Vue js Android将CAMERA图像上传到API服务器

如何从 PhoneGap iOS 6 应用程序中删除位置服务请求?