【问题标题】：How can Ionic be setup to render in the iOS style by default?如何将 Ionic 设置为默认以 iOS 样式呈现？
【发布时间】：2017-10-12 09:16:40
【问题描述】：

现在 ionic 应用默认使用 android 样式呈现。我不想每次都使用 ?ionicplatform=ios 参数，而是希望它成为默认选项。

我在config.xml 中寻找提示以及 app.module.ts 中的配置设置，例如：

IonicModule.forRoot(
      MyApp, 
      {
        swipeBackEnabled: true,
        platforms: {
          ios: {
            swipeBackEnabled: true,
            statusbarPadding: false
          }
        }
      }
    ),

并且无法找到一种优雅的方法......有什么想法吗？

【问题讨论】：

标签： android ios angular ionic2 ionic3

【解决方案1】：

你只需要这样做：

app.module.ts

imports: [
IonicModule.forRoot(MyApp,{
    mode: 'ios'
})
],

注意：来自@sebaferreras

顺便说一句，通过设置此配置，应用程序将使用 ios 样式和组件，即使您在 Android 设备上运行它。请注意 ?ionicplatform=ios 只是用来查看应用程序的外观使用浏览器，但不影响应用程序的构建方式。但设置模式：'ios' 将强制 ios 模式并应用 ios 样式即使您构建并创建了一个 .apk 文件。

【讨论】：

好的，工作！顺便说一句，对于任何阅读这篇文章并打算反其道而行之的人，ios 的替代模式不是 android 而是“md”//材料设计
很高兴听到它有帮助:)
顺便说一句 @DavidHaddad，通过设置此配置，应用程序将使用 ios 样式和组件即使您在 Android 设备上运行它。请注意?ionicplatform=ios只是用来查看应用在使用浏览器时的样子，并不影响应用的构建方式。但是设置 mode: 'ios' 将强制 ios 模式并应用 ios 样式，即使您构建并创建了 .apk 文件。
感谢您的来信！平台 Android 部分中的节点有一个覆盖，它将模式设置为“md”。问这个问题的原因是在网络上看到应用程序时覆盖样式:-)
你也可以使用这个CLI：--lab, -l Test your apps on multiple platform types in the browser

【解决方案2】：

在 index.html 中只定义mode

对于 iOS

<html lang="en" mode="ios">

安卓版

<html lang="en" mode="md">

【讨论】：

这个救我。 ionic 文档告诉我们使用 class="ios"。这应该是 mode="ios"。谢谢！

【解决方案3】：

使用@ionic/react 这就是你的方式：

import {setupConfig} from '@ionic/react'

setupConfig({mode: 'ios'})

或者强制执行 Material Design：

setupConfig({mode: 'md'})

您可以将此代码放在您的主 App.js/App.tsx 文件中。

有关更多全局设置，另请参阅 https://ionicframework.com/docs/react/config。

【讨论】：

【解决方案4】：

对于使用 Ionic 的新 Vue.js 支持的任何人，可以通过在导入 Vue 时执行此操作来强制呈现模式：

import Vue from 'vue';

// ios
Vue.use(Ionic, {
  mode: 'ios'
});

// material design
Vue.use(Ionic, {
  mode: 'md'
});

【讨论】：

【解决方案5】：

如果您使用的是更新版本的 Ionic（在我的情况下为 4.8.0），请添加到 Ben Everard 的答案

IonicModule.forRoot ->

不接受两个参数。只需将第一个参数设置为：

IonicModule.forRoot({ mode: 'ios' }),

【讨论】：

【解决方案6】：

请在你的 index.html 文件中试试这个

我在 ionic 4 中尝试了以下 html 代码，它可以工作

使用下面的一个来获得与 ios 相同的 apk 样式。

<html lang="en" dir="ltr" class="plt-iphone plt-ios plt-phablet plt-mobile ios" mode="ios">

使用下面的方法来为你的 ios 应用设置与 android 相同的样式。

<html lang="en" dir="ltr" class="plt-android plt-mobile md" mode="md">

【讨论】：

【解决方案7】：

2022 年更新

离子 v6（反应）

转到您的app.tsx

强制Android风格（Material Design）

setupIonicReact({ mode: 'md' })

强制 iOS 样式

setupIonicReact({ mode: 'ios' })

参考：https://ionicframework.com/docs/react/config

离子 v6（角度）

转到您的app.module.ts

强制Android风格（Material Design）

imports: [ IonicModule.forRoot({ mode: 'md' }) ]

强制 iOS 样式

imports: [ IonicModule.forRoot({ mode: 'ios' }) ]

https://ionicframework.com/docs/angular/config

【讨论】：