8.7 发布—WinterCG 兼容性第一部分
了解更多

在 GitHub 上查看

@nativescript/theme-switcher ​

内容 ​

安装 ​

cli
npm install @nativescript/theme-switcher

使用 ​

注册主题 ​

使用 initThemes() 函数来注册要切换的主题。

在应用的 app.ts 或 main.ts 文件中调用此函数，在应用启动之前。

ts
import { initThemes, switchTheme } from '@nativescript/theme-switcher'

// first initialize the themes
initThemes({
  // default is optional - will be auto-applied after initializing (*)
  default: () => import('theme-loader!./themes/default.scss'),
  red: () => import('theme-loader!./themes/red.scss'),
  green: () => import('theme-loader!./themes/green.scss'),
})

切换主题 ​

要切换主题，请调用 [switchTheme()] 方法，并将要切换到的主题名称作为参数传递给它。

ts
switchTheme('red')
switchTheme('green')

注意

theme-loader! 前缀用于应用自定义加载程序，以防止样式被自动应用，而是在主题切换器按需应用。它需要 @nativescript/webpack@5+才能正常工作。

TypeScript 用户注意事项

TypeScript 不了解 theme-loader 或 css/scss 文件，为了抑制调用 import('theme-loader!./path/to/theme.css') 时的类型错误，您可以添加

ts
/// <reference path="./node_modules/@nativescript/theme-switcher/shims.d.ts" />

到您的 references.d.ts 中，或者使用 // @ts-ignore 来在本地抑制错误。

同时切换多个主题 ​

如果您需要同时切换多个主题，可以初始化任意数量的切换器。每个切换器将加载 CSS 并持久保存（除非禁用）上次选定的主题。

如果您的应用可以单独切换主题的不同部分，则很有用。例如

  1. switcher1 切换按钮样式
  2. switcher2 切换字体样式
  3. 等等。
ts
import { ThemeSwitcher } from '@nativescript/theme-switcher'

const switcher1 = new ThemeSwitcher('switcher1')
const switcher2 = new ThemeSwitcher('switcher2')

switcher1.initThemes({
  /* ... */
})
switcher2.initThemes({
  /* ... */
})

switcher1.switchTheme(/* ... */)
switcher2.switchTheme(/* ... */)

API ​

initThemes() ​

ts
initThemes(themes, options)

注册要切换的主题。

参数类型描述
themesThemeDefinition一个对象，其中主题名称作为键，加载程序函数返回主题 css（css 字符串、ast，可选的异步）。如果设置为主题，default 将首先应用。
optionsThemeSwitcherOptions可选：主题初始化设置。

ThemeDefinition ​

ts
interface ThemeDefinition {
  [name: string]: () => any
}

ThemeSwitcherOptions ​

选项类型描述
persistentboolean可选：默认为 true。如果启用了 persistent，则上次选定的主题将保存到 ApplicationSettings，并在调用 initThemes() 时自动恢复。
persistenceKeystring可选：设备存储中选定主题的键。默认为 __theme_switcher_default

switchTheme() ​

ts
switchTheme(themeName)

用于从当前主题切换到指定的主题。

参数类型描述
themeNamestring要切换到的主题的名称。

loadDefaultTheme() ​

ts
import { loadDefaultTheme } from '@nativescript/theme-switcher'

loadDefaultTheme()

如果启用了持久性，则加载上次选定的主题，否则如果存在，则加载 "default"。

演示应用 ​

在 StackBlitz 上使用 NativeScript 预览应用试用插件的 演示。

许可 ​

Apache 许可证 2.0 版

下一个
Twitter