ym-rn-theme

v1.0.0

Published

5 months ago

## 安装

Downloads

0High
0Medium
0Low

yunmairn

云麦RN组件库

安装

yarn add ym-rn-theme

使用

初始化多个主题如：“SmarthomeTheme”、“WearableTheme”，在“...”省略处可新增自定义属性,其余为必填属性。

import { Fonts, Colors } from "../resources/Smarthome_resources";
import Images from "../resources/Images"
import { Theme } from "ym-rn-theme"

const SmarthomeTheme: Theme = {
    colorTheme: {
        C_BLACK_TEXT: Colors.C_BLACK_TEXT,
        C_BTN_BGC_NORMAL: Colors.C_BTN_BGC_NORMAL,
        C_BTN_BGC_HELIGHT: Colors.C_BTN_BGC_HELIGHT,
        C_BTN_TXT_NORMAL: Colors.C_BTN_TXT_NORMAL,
        C_BTN_TXT_HELIGHT: Colors.C_BTN_TXT_HELIGHT,
        C_000000_80: Colors.C_000000_80,
        C_THEME: Colors.C_THEME,
        C_THEME_10: Colors.C_THEME_10,
        C_WHITE: Colors.C_WHITE,
        C_WHITE_ALWAYS: Colors.C_WHITE_ALWAYS,
        C_BLACK: Colors.C_BLACK,
        C_BLACK_ALWAYS: Colors.C_BLACK_ALWAYS,
        C_CLEAR: "transparent",
        C_NAVI_WHITE: Colors.C_NAVI_WHITE,
        C_BGC_DARKGRAY: Colors.C_BGC_DARKGRAY,
        C_BGC_LIGHTGRAY: Colors.C_BGC_LIGHTGRAY,
        C_BGC_DIALOG: Colors.C_BGC_DIALOG,
        C_247000: Colors.C_247000,
        C_102153: Colors.C_102153,
        C_BTN_BGC_DISABLE: Colors.C_BTN_BGC_DISABLE,
        C_BTN_TXT_DISABLE: Colors.C_BTN_TXT_DISABLE,
        C_000000: Colors.C_000000,
        C_000000_06: Colors.C_000000_06,
        C_000000_10: Colors.C_000000_10,
        C_000000_20: Colors.C_000000_20,
        C_000000_30: Colors.C_000000_30,
        C_000000_40: Colors.C_000000_40,
        C_000000_50: Colors.C_000000_50,
        C_000000_60: Colors.C_000000_60,
        C_000000_90: Colors.C_000000_90,
        C_FFFFFF: Colors.C_FFFFFF,
        C_FFFFFF_15: Colors.C_FFFFFF_15,
        C_FFFFFF_20: Colors.C_FFFFFF_20,
        C_FFFFFF_30: Colors.C_FFFFFF_30,
        C_FFFFFF_40: Colors.C_FFFFFF_40,
        C_FFFFFF_50: Colors.C_FFFFFF_50,
        C_FFFFFF_60: Colors.C_FFFFFF_60,
        C_FFFFFF_70: Colors.C_FFFFFF_70,
        C_FFFFFF_80: Colors.C_FFFFFF_80,
        C_FFFFFF_90: Colors.C_FFFFFF_90,
        ...
    },
    fontTheme: {
        miLanProMedium: Fonts.miLanProMedium,
        miLanProRegular: Fonts.miLanProRegular,
        miLanProNormal: Fonts.miLanProNormal,
        miSansLight: Fonts.miSansLight,
        miSansRegular: Fonts.miSansLight,
        miSansMedium: Fonts.miSansLight,
        miSansBold: Fonts.miSansLight,
        ...
    },
    iconTheme: {
        user: {
            add: Images.user.add,
            avatar: {
                default: Images.user.avatar.default,
                baby: Images.user.avatar.baby,
                man: Images.user.avatar.man,
                woman: Images.user.avatar.woman,
                oldman: Images.user.avatar.oldman,
                oldwoman: Images.user.avatar.oldwoman,
                ...
            },
            guide: {
                step_1: Images.user.guide.step_1,
                step_2: Images.user.guide.step_2,
                step_3: Images.user.guide.step_3,
                ...
            },
            ...
        },
        home: {
            background_image: Images.home.background_image,
            user_list_right: Images.home.user_list_right,
            user_manager: Images.home.user_manager,
            user_current: Images.home.user_current,

            data_empty: Images.home.data_empty,
            data_load_failure: Images.home.data_load_failure,
            data_history: Images.home.data_history,
            data_unclaim: Images.home.data_unclaim,

            ble_connecting: Images.home.ble_connecting,
            ble_unconnect: Images.home.ble_unconnect,
            gatway_warning: Images.home.gatway_warning,
            guide_entry: Images.home.guide_entry,

            measure_regular: Images.home.measure_regular,
            measure_baby: Images.home.measure_baby,
            measure_balance: Images.home.measure_balance,
            measure_visitor: Images.home.measure_visitor,
            ...
        },
        icons: {
            info: Images.icons.info,
            close: Images.icons.close,
            right_arrow: Images.icons.right_arrow,
            arrow_down_black: Images.icons.arrow_down_black,
            check_data: Images.icons.check_data,
            uncheck_data: Images.icons.uncheck_data,
            delete_data: Images.icons.delete_data,
            empty_data: Images.icons.empty_data,
            data_load_failure: Images.icons.data_load_failure,
            ...
        },
        ...
    }
}
export default SmarthomeTheme

配置初始化的主题 避免在配置前使用Colors、Fonts、Images等资源，因此尽可能在项目加载前去设置主题，随后导出资源，如在resources/index.js处理

import SmarthomeTheme from '../theme/SmarthomeTheme';
import WearableTheme from '../theme/WearableTheme';
import { ThemeUtil } from 'ym-rn-theme';
import Host from 'miot/Host';

if (ThemeUtil.addTheme("SmarthomeTheme", SmarthomeTheme) && ThemeUtil.addTheme("WearableTheme", WearableTheme)) {
    const themeName = Host.businessType !== "Wear" ? "WearableTheme" : "SmarthomeTheme";
    ThemeUtil.changeTheme(themeName)
};

import { dynamicImage } from "./images/DynamicImage";
import Strings from './strings';
import {Colors,Fonts,Images} from 'ym-rn-theme'; 

export { 
    Fonts,
    Colors,
    Images, 
    Strings,
    dynamicImage,
};

使用资源

import { Colors } from "ym-rn-theme"
Colors.C_BLACK_TEXT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

云麦RN组件库

安装

使用

相关文档