ionic5 配置android ios使用一套css样式
使用ionic5开发项目的时候我们会发现，android平台和ios平台使用的不是一套样式。项目在android平台使用的是android的样式，在ios平台使用的是ios样式，现在我们想的是让ionic5 项目android ios使用一套css样式，下面我们看看如何实现。
在ionic5.x中配置中android和ios的css使用同一套样式和在ionic3.x中基本是一样的。
首先找到全局根目录 app.module.ts ，然后在根模块的IonicModule.forRoot中就可以配置android ios使用一套css样式。
默认情况跟模块是这样的,代码如下：
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot({}), AppRoutingModule,HttpClientModule],
providers: [
StatusBar,
SplashScreen,
HttpserviceService,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
现在我们想让android ios都使用ios的样式，那么进行如下配置：
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot({
mode:'ios', //配置android ios 都使用一个样式
backButtonText:"返回" //配置默认的返回按钮
}), AppRoutingModule,HttpClientModule],
providers: [
StatusBar,
SplashScreen,
HttpserviceService,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
这样配置完成后我们的ionic5 项目在android ios 上面就使用一样的样式了。
关于更多IonicModule.forRoot的配置，我们可以打开vscode 按键盘的ctrl+鼠标左键。点击forRoot。就可以看到更多配置了。如下
export interface IonicConfig {
/**
* When it's set to `false`, disables all animation and transition across the app.
* Can be useful to make ionic smoother in slow devices, when animations can't run smoothly.
*/
animated?: boolean;
/**
* When it's set to `false`, it disables all material-design ripple-effects across the app.
* Defaults to `true`.
*/
rippleEffect?: boolean;
/**
* The mode determines which platform styles to use for the whole application.
*/
mode?: Mode;
/**
* Wherever ionic will respond to hardware go back buttons in an Android device.
* Defaults to `true` when ionic runs in a mobile device.
*/
hardwareBackButton?: boolean;
/**
* Whenever clicking the top status bar should cause the scroll to top in an application.
* Defaults to `true` when ionic runs in a mobile device.
*/
statusTap?: boolean;
/**
* Overrides the default icon in all `<ion-back-button>` components.
*/
backButtonIcon?: string;
/**
* Overrides the default text in all `<ion-back-button>` components.
*/
backButtonText?: string;
/**
* Overrides the default icon in all `<ion-menu-button>` components.
*/
menuIcon?: string;
/**
* Overrides the default menu type for all `<ion-menu>` components.
* By default the menu type is chosen based in the app's mode.
*/
menuType?: string;
/**
* Overrides the default spinner in all `<ion-spinner>` components.
* By default the spinner type is chosen based in the mode (ios or md).
*/
spinner?: SpinnerTypes;
/**
* Overrides the default spinner for all `ion-loading` overlays, ie. the ones
* created with `ion-loading-controller`.
*/
loadingSpinner?: SpinnerTypes | null;
/**
* Overrides the default icon in all `<ion-refresh-content>` components.
*/
refreshingIcon?: string;
/**
* Overrides the default spinner type in all `<ion-refresh-content>` components.
*/
refreshingSpinner?: SpinnerTypes | null;
/**
* Overrides the default spinner type in all `<ion-infinite-scroll-content>` components.
*/
infiniteLoadingSpinner?: SpinnerTypes | null;
/**
* Global switch that disables or enables "swipe-to-go-back" gesture across all
* `ion-nav` in your application.
*/
swipeBackEnabled?: boolean;
/**
* Overrides the default "layout" of all `ion-bar-button` across the whole application.
*/
tabButtonLayout?: TabButtonLayout;
/**
* Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application.
* This prop allows to replace the default transition and provide a custom one that applies to all navigation outlets.
*/
navAnimation?: AnimationBuilder;
/**
* Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation".
*/
actionSheetEnter?: AnimationBuilder;
/**
* Provides a custom enter animation for all `ion-alert`, overriding the default "animation".
*/
alertEnter?: AnimationBuilder;
/**
* Provides a custom enter animation for all `ion-loading`, overriding the default "animation".
*/
loadingEnter?: AnimationBuilder;
/**
* Provides a custom enter animation for all `ion-modal`, overriding the default "animation".
*/
modalEnter?: AnimationBuilder;
/**
* Provides a custom enter animation for all `ion-popover`, overriding the default "animation".
*/
popoverEnter?: AnimationBuilder;
/**
* Provides a custom enter animation for all `ion-toast`, overriding the default "animation".
*/
toastEnter?: AnimationBuilder;
/**
* Provides a custom enter animation for all `ion-picker`, overriding the default "animation".
*/
pickerEnter?: AnimationBuilder;
/**
* Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation".
*/
actionSheetLeave?: AnimationBuilder;
/**
* Provides a custom leave animation for all `ion-alert`, overriding the default "animation".
*/
alertLeave?: AnimationBuilder;
/**
* Provides a custom leave animation for all `ion-loading`, overriding the default "animation".
*/
loadingLeave?: AnimationBuilder;
/**
* Provides a custom leave animation for all `ion-modal`, overriding the default "animation".
*/
modalLeave?: AnimationBuilder;
/**
* Provides a custom leave animation for all `ion-popover`, overriding the default "animation".
*/
popoverLeave?: AnimationBuilder;
/**
* Provides a custom leave animation for all `ion-toast`, overriding the default "animation".
*/
toastLeave?: AnimationBuilder;
/**
* Provides a custom leave animation for all `ion-picker`, overriding the default "animation".
*/
pickerLeave?: AnimationBuilder;
keyboardHeight?: number;
inputShims?: boolean;
scrollPadding?: string;
inputBlurring?: string;
scrollAssist?: boolean;
hideCaretOnScroll?: string;
persistConfig?: boolean;
_forceStatusbarPadding?: boolean;
_testing?: boolean;
}
这就是ionic5 配置android ios使用一套css样式的使用方法,ionic5 配置android ios使用一套css样式就给大家先介绍到这里，希望对你有帮助
更多ionic5 配置android ios使用一套css样式的使用教程：https://www.itying.com/goods-1067.html
