本页目录
一、相关配置操作流程全局配置路由配置页面配置二、变量配置文件全局配置接入路由配置接入页面配置接入三、获取当前系统主题四、监听主题切换事件

应用配置

一、相关配置

操作流程

  1. 在 src/global.config.ts 中配置 themeLocation，指定变量配置文件 theme.json 路径，例如：在 src 目录下新增 theme.json，需要配置 "themeLocation":"theme.json"。
  2. 在 src/theme.json 中定义相关变量。
  3. 在 src/global.config.ts 全局配置或 src/routes.config.ts 路由配置或 src/pages/${pageId}/index.config.ts 页面配置中以 @ 开头引用变量。

支持通过变量配置的一共有以下三大类：

全局配置

  • 全局配置文件 src/global.config.ts 下 tuya.window 对象：

    详见 小程序配置-app.json 全局配置#window

    • navigationBarBackgroundColor
    • navigationBarTextStyle
    • backgroundColor
    • backgroundTextStyle
    • backgroundColorTop
    • backgroundColorBottom

路由配置

页面配置

  • 页面配置文件 src/pages/${pageId}/index.config.ts 下导出的对象：

    详见 小程序页面-页面配置

    • backgroundColor
    • backgroundTextStyle
    • navigationBarBackgroundColor
    • navigationBarTextStyle

二、变量配置文件

theme.json 用于颜色主题相关的变量定义，需要先在 themeLocation 中配置 theme.json 的路径，否则无法读取变量配置。

配置文件须包含以下属性：

属性类型必填描述
lightobject是浅色模式下的变量定义
darkobject是深色模式下的变量定义

light 和 dark 下均可以 key: value 的方式定义变量名和值，例如：

{
  "light": {
    "navBgColor": "#F6F7FB",
    "navTxtStyle": "black",
    "bgColor": "rgba(0, 0, 0, 0.7)",
    "setNavBgColor": "#FFFFFF",
    "setBgColor": "#f5f5f5",
    "tabFontColor": "#000000",
    "tabSelectedColor": "#3cc51f",
    "tabBgColor": "#ffffff",
    "tabBorderStyle": "black"
  },
  "dark": {
    "navBgColor": "#F6F7FB",
    "navTxtStyle": "black",
    "bgColor": "rgba(0, 0, 0, 0.7)",
    "setNavBgColor": "#FFFFFF",
    "setBgColor": "#f5f5f5",
    "tabFontColor": "#ffffff",
    "tabSelectedColor": "#51a937",
    "tabBgColor": "#191919",
    "tabBorderStyle": "white"
  }
}

完成定义后，可在全局配置或页面配置的相关属性中以 @ 开头引用，例如：

全局配置接入

src/global.config.ts
// src/global.config.ts
import { GlobalConfig } from '@ray-js/types';

export const tuya = {
  themeLocation: 'theme.json',
  window: {
    backgroundColor: '@bgColor',
    navigationBarTitleText: 'Title',
    navigationBarBackgroundColor: '@navBgColor',
    navigationBarTextStyle: '@navTxtStyle',
  },
};

const globalConfig: GlobalConfig = {
  basename: '',
};

export default globalConfig;

路由配置接入

src/routes.config.ts
// src/routes.config.ts
import { Routes, TabBar } from '@ray-js/types';

export const routes: Routes = [
  {
    route: '/',
    path: '/pages/home/index',
    name: 'Home',
  },
  {
    route: '/history',
    path: '/pages/history/index',
    name: 'History',
  },
  {
    route: '/setting',
    path: '/pages/setting/index',
    name: 'Setting',
  },
];

export const tabBar: TabBar = {
  textColor: '@tabFontColor',
  selectedColor: '@tabSelectedColor',
  backgroundColor: '@tabBgColor',
  borderStyle: '@tabBorderStyle' as 'white' | 'black',
  list: [
    {
      text: 'Home',
      icon: '/tabBar/home.png', // 注意此处的 icon 需要在 public/tabBar/home.png 下存在
      route: '/',
      activeIcon: '/tabBar/home-active.png', // 注意此处的 icon 需要在 public/tabBar/home-active.png 下存在
      pagePath: '/pages/home/index',
    },
    {
      text: 'History',
      icon: '/tabBar/history.png',
      route: '/history',
      activeIcon: '/tabBar/history-active.png',
      pagePath: '/pages/history/index',
    },
    {
      text: 'Setting',
      icon: '/tabBar/setting.png',
      route: '/setting',
      activeIcon: '/tabBar/setting-active.png',
      pagePath: '/pages/setting/index',
    },
  ],
};

页面配置接入

src/pages/home/index.config.ts
// src/pages/home/index.config.ts
export default {
  backgroundColor: '@bgColor',
  navigationBarBackgroundColor: '@navBgColor',
  navigationBarTextStyle: '@navTxtStyle',
  navigationBarTitleText: 'Home',
  disableScroll: true,
};

配置完成后，Ray 框架会自动根据系统主题，为小程序展示对应主题下的颜色。

三、获取当前系统主题

getSystemInfo 或 getSystemInfoSync 的返回结果中会包含 theme 属性，值为 light 或 dark。

四、监听主题切换事件

可通过 useAppEvent 监听主题切换事件，如下代码所示：

import React from 'react';
import { Text, View, useAppEvent } from '@ray-js/ray';

export default function App() {
  useAppEvent('onThemeChange', data => {
    console.log('这个 hook 等同于 onThemeChange', data);
  });

  return (
    <View>
      <Text>切换系统主题后查看日志输出</Text>
    </View>
  );
}