如何将Ionic设置为默认情况下以iOS样式渲染？

vawmfj5a 于 2022-12-15 发布在 iOS

关注(0)|答案(9)|浏览(162)

现在ionic应用默认使用android样式，而不是每次都使用?ionicplatform=ios参数，我希望这是默认选项。
我在config.xml中寻找提示，以及在app.module.ts中寻找配置设置，例如：

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

却找不到一种优雅的方式...有什么想法吗？

ios

来源：https://stackoverflow.com/questions/46705791/how-can-ionic-be-setup-to-render-in-the-ios-style-by-default

9条答案

按热度按时间

z3yyvxxp1#

你只需要这样做：

应用程序模块.ts*

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

**注：**从@sebaferreras开始

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

赞(0）回复(0）举报 2022-12-15

ijxebb2r2#

在index.html中只定义mode
适用于iOS

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

字符串
适用于android

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

赞(0）回复(0）举报 2022-12-15

ljo96ir53#

使用@ionic/react的过程如下：

import {setupConfig} from '@ionic/react'

setupConfig({mode: 'ios'})

强制执行材料设计的替代方法：

setupConfig({mode: 'md'})

您可以将此代码放在主App.js/App.tsx文件中。
另请参见https://ionicframework.com/docs/react/config了解更多全局设置。

赞(0）回复(0）举报 2022-12-15

vxbzzdmp4#

只是补充一下Ben Everard的回答，如果您使用的是更新版本的Ionic（我使用的是4.8.0）

IonicModule.forRoot ->

将不接受两个参数。只需删除第一个参数，使其如下所示：

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

赞(0）回复(0）举报 2022-12-15

fumotvh35#

对于使用新的Vue.js对Ionic支持的任何人来说，可以在导入Vue时执行以下操作来实现强制渲染模式：

import Vue from 'vue';

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

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

赞(0）回复(0）举报 2022-12-15

xj3cbfub6#

请在index.html文件中尝试此操作
我尝试了下面的html代码在离子4和它的作品
使用下面的一个获得风格你的apk一样的ios。

<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">

赞(0）回复(0）举报 2022-12-15

sgtfey8w7#

离子v6（React）

转到您的app.tsx

强制Android风格（材质设计）

setupIonicReact({ mode: 'md' })

强制iOS风格

setupIonicReact({ mode: 'ios' })
参考：https://ionicframework.com/docs/react/config

离子v6（Angular ）

转到您的app.module.ts

强制Android风格（材质设计）

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

强制iOS风格

imports: [ IonicModule.forRoot({ mode: 'ios' }) ]
https://ionicframework.com/docs/angular/config

赞(0）回复(0）举报 2022-12-15

dw1jzc5e8#

离子型V6 - VUE

createApp(App).use(IonicVue, {
  mode: 'ios',
});

文件：https://ionicframework.com/docs/vue/config

赞(0）回复(0）举报 2022-12-15

gr8qqesn9#

对于Vue 3和离子6

import { createApp } from "vue";
import App from "./App.vue";
import { IonicVue } from "@ionic/vue";

const app = createApp(App);
app.use(IonicVue, {mode: "ios"});
app.mount("#app");

赞(0）回复(0）举报 2022-12-15

我来回答

如何将Ionic设置为默认情况下以iOS样式渲染？

9条答案

离子v6（React）

离子v6（Angular ）

离子型V6 - VUE

相关问题

热门标签

最新问答