Question

现在，离子应用程序默认使用android样式呈现。我不是每次都使用?ionicplatform=ios参数，而是将其作为默认选项。

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

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

并且无法找到一种优雅的方式......任何想法？

Answer 1

你只需要这样做：

app.module.ts

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

注意：来自@sebaferreras

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

Answer 2

使用@ionic/react就是这样：

import {setupConfig} from '@ionic/react'

setupConfig({mode: 'ios'})

或者用于执行材料设计：

setupConfig({mode: 'md'})

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

有关其他全局设置，另请参见https://ionicframework.com/docs/react/config。

Answer 3

请在您的index.html文件中尝试

我在ionic 4中尝试了以下html代码，并且有效

使用以下内容来设置与ios相同的apk样式。

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

使用下面的一个样式来设置与android相同的ios应用。

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

Answer 4

在index.html中只需定义mode

对于iOS

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

对于android

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

Answer 5

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

import Vue from 'vue';

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

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

Answer 6

如果您使用的是Ionic的最新版本（在我的情况下为4.8.0），只需添加Ben Everard的答案即可

IonicModule.forRoot ->

将不接受两个参数。只需删除第一个参数即可：

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

默认情况下，如何设置Ionic以iOS风格呈现？

6 个答案: