I know that variants of this question have been asked dozens of times, but I have not yet found one that addresses this combination: I want to see a non-overlapping status bar on iOS 7 using Adobe Phonegap Build.
I added the PhoneGap Statusbar plugin to my config.xml:
<gap:plugin name="com.phonegap.plugin.statusbar" version="1.1.0" />
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>
This causes the black status bar to display correctly without blocking my site, but the text is (presumably) black because I cannot see it.
I removed the parameter ios-statusbarstylefrom the config.xml file for a good evaluation, it does not seem to make any difference.
The plugin mentions that the config.xml parameters are not supported by the PhoeGap assembly, so I tried using a JavaScript object for the StatusBar. This is my full index.html file:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
StatusBar.show();
StatusBar.overlaysWebView(false);
StatusBar.backgroundColorByHexString("#C8DB2F");
}
</script>
</head>
<body onload="onLoad()">
Test.
</body>
</html>
but the backgroundColorByHexString () function does nothing and, in fact, the StatusBar object does not exist at all - this is confirmed using the PhoneGap Build debug window, and because any JS that I try to put after these lines will not be executed, therefore, presumably this is mistake.
Any thoughts on how to set the background color in the status bar or text color? Do I need to use the CLI instead of PhoneGapBuild?
source
share