Cordova iOS 横向答案

【问题标题】：Cordova iOS landscape orientationCordova iOS 横向
【发布时间】：2018-11-06 23:04:58
【问题描述】：

我的 Cordova 应用在 iPhone 上运行时从不旋转到横向模式。

我尝试了许多解决方案，将这些行放在 config.xml 文件中：

  <preference name="ios-orientation-iphone" value="portrait and landscape" />
  <preference name="ios-orientation-ipad" value="portrait and landscape" />
  <preference name="Orientation" value="default" />

我还在<platform name="ios"> 块内添加了以下行：

<preference name="Orientation" value="all" />

然后我在 index.js 文件中做了以下操作：

        window.shouldRotateToOrientation = function (degrees) {
            return true;
        };

最后，我尝试在 res/native/ios 文件夹中创建一个自定义 plist 文件，因为我注意到生成的 plist 文件不包含这些行：

            <key>UISupportedInterfaceOrientations</key>
            <string>UIInterfaceOrientationLandscapeLeft</string>
            <string>UIInterfaceOrientationLandscapeRight</string>
            <string>UIInterfaceOrientationPortrait</string>
            <string>UIInterfaceOrientationPortraitUpsideDown</string>

我不知道下一步该做什么。谢谢

【问题讨论】：

如果删除所有这些会发生什么？默认情况下，Cordova 应该允许横向和纵向。仅添加：<preference name="Orientation" value="default" /> 到您的 config.xml，如果您想明确说明
只需在 Xcode 中进行设置即可。

标签： ios cordova

【解决方案1】：

我终于做到了。诀窍就是将自定义 .plist 文件放在 res/native//-Info.plist 中。

这个链接给了我解决方案：Tools for Apache Cordova (VS2015): Adding custom entries to *info.plist for iOS

【讨论】：

【解决方案2】：

是的，这是创建 Xcode 项目的 cordova cli 的一个缺点——它没有添加那些方向标签。

不久前，我在 config.xml 中添加了以下内容（我目前正在使用 PhoneGap 构建服务）。

<gap:config-file platform="ios" parent="UISupportedInterfaceOrientations" mode="replace">
    <array>
      <string>UIInterfaceOrientationPortrait</string>
      <string>UIInterfaceOrientationLandscapeLeft</string>
      <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
</gap:config-file>

更新：我有一个 <config-file> 元素的链接，但看起来该元素用于插件（在 plugin.xml 文件中），而不是用于正常构建 - 所以它赢了不行。

所以...你最好的选择是：

要以编程方式添加方向内容，请创建一个脚本来查找您的 .plist 文件，如果该块不存在，则将以下块添加到其中：

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationPortraitUpsideDown</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>

要在通过cordova platform add ios 添加平台后添加它，打开 .xcodeproj 文件，转到项目节点/常规/部署信息，并检查 iPhone 和 iPad 的所有方向。

【讨论】：

我尝试了你告诉我的一切，但没有任何效果。我还尝试将设置重置为默认值，但没有更改。它不适用于模拟器和 iPhone 设备。我注意到构建时生成的 .plist 文件不包含方向设置，即使我尝试在 /res/native/ios 中覆盖此文件也是如此。还有其他想法吗？谢谢
我刚刚检查了第二个链接，它看起来像是特定于插件的，所以它对你没有帮助。我已经更新了我的答案——看起来你的选项是创建一个脚本来将块添加到 .plist 文件中，或者从 Xcode 中手动更改配置（正如@Joerg 提到的那样）。
感谢您的回复。但我忘了提到我不在 Mac OS 上工作。我在 Visual Studio 上使用 Cordova 在 Windows 上工作。所以我无法找到 .xcodeproj 文件。
好吧，这进一步限制了您的选择。 .xcodeproj 文件应该显示在您的平台/ios 目录中作为一个目录（在 OS X 中也是如此）。但是，如果您在 Windows 上，您将无法在 Xcode 中手动更改方向。您唯一的选择是将我在上面发布的块添加到您的 .plist 文件中。在文件中最后一个 </dict></plist> 之前添加块。
感谢您的帮助。无论如何，我尝试手动编辑在我的 Cordova 应用程序目录中找到的所有 .plist 文件。他们的内容在运行时被完全删除，不考虑我的编辑。我想知道为什么会发生这种行为，因为当我以 Windows Phone 为目标时，我只是复制了基本的 appxmanifest 文件并设置了我自己的属性，它运行良好。因此，需要明确的是，您的解决方案是在平台/ios 中制作一个脚本以在运行时覆盖 .plist 内容？

【解决方案3】：

我知道您已经找到了解决方案。这是另一个使用构建钩子和 npm.js 来完成工作的；好处是这应该可以跨平台工作，如果您曾经在 linux 或 OSX 上进行开发。以下是有关构建挂钩的更多信息：http://cordova.apache.org/docs/en/latest/guide/appdev/hooks/index.html

将以下内容添加到您的 config.xml 文件中：

<platform name="ios">
    <hook type="after_prepare" src="iosAfterPrepare.js" />
</platform>

在顶级目录中创建一个名为iosAfterPrepare.js 的文件并复制以下内容（将MyProject 替换为您的项目名称）：

// iosAfterPrepare.js
// Node.js build script run after "cordova ios prepare" (part of cordova build).
// This adds the various orientations to the plist file for your project.

module.exports = function (context) {
  var fs    = require('fs'),     // nodejs.org/api/fs.html
      plist = require('plist'),  // www.npmjs.com/package/plist
      // Here you will replace "MyProject" with the name of yours,
      // so that the .plist file can be found
      FILEPATH = 'platforms/ios/MyProject/MyProject-Info.plist',
      xml = fs.readFileSync(FILEPATH, 'utf8'),
      obj = plist.parse(xml);

  obj.UISupportedInterfaceOrientations = [
      "UIInterfaceOrientationPortrait",
      "UIInterfaceOrientationPortraitUpsideDown",
      "UIInterfaceOrientationLandscapeLeft",
      "UIInterfaceOrientationLandscapeRight"
  ];

  xml = plist.build(obj);
  fs.writeFileSync(FILEPATH, xml, { encoding: 'utf8' });

};

您可能需要致电 npm install --save plist 以在您的机器上获取 plist 模块（它会抱怨找不到 plist）。

呼叫：

cordova platform rm ios
cordova platform add ios

此时您应该会看到 .plist 文件中的行。

【讨论】：

【解决方案4】：

这在科尔多瓦 v 7.0.1 中对我有用

`<preference name="Orientation" value="default" />`

在config.xml

【讨论】：

【解决方案5】：

对于 iOS，您需要在 index.html 文件的内容安全策略中添加“gap://*”属性（需要两个斜杠）。例如：

 <meta http-equiv="Content-Security-Policy" content="default-src 'self' data:* gap://* tel:* 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'" />

否则手机只有在用户与操作系统交互时才会改变方向（按下正面按钮，向下拖动显示通知中心或向上拖动进入设备设置）。

如果没有设置 gap://* 值，ondeviceready 事件不会触发。

你还需要添加cordova-plugin-whitelist插件。

来自corvoda-plugin-whitelist的描述：

gap：仅在 iOS 上需要（使用 UIWebView 时），JS->native 通信需要

在科尔多瓦 8.1.2 上测试

【讨论】：

&lt;preference name="Orientation" value="default" /&gt;

`<preference name="Orientation" value="default" />`