跳到主要内容

简介

本节介绍如何对 ESP RainMaker Home 示例应用进行基础自定义，包括更换应用图标和设置品牌主题色，以实现个性化品牌展示。

如果你已经试用过示例 ESP RainMaker Home 应用，发现其功能足以满足需求，可以使用产品图标进行重新品牌化，更改颜色主题以适配品牌色彩，并配置公司的隐私政策和产品使用条款。请确保适当遵守许可条款和条件。

前提条件​

假设你已经准备好应用开发环境。请按照说明设置开发环境。以下所有参考内容均基于克隆自 GitHub 的 ESP RainMaker Home 示例应用源码仓库。

品牌自定义​

可以自定义品牌图标、启动画面以及其他图片和资源。

自定义应用图标和图片​

  • 应用图标位于 assets/images/ 文件夹中，请用自定义品牌图标替换。
  • 应用设备图标位于 assets/images/devices/ 文件夹中。
  • 添加自定义品牌资源。

图标和资源文件的配置和路径在 app.json 文件中维护。

自定义启动画面​

针对不同平台，启动画面资源保存在不同目录中。

可以在 app.json 文件中配置启动画面行为：

{
  "expo": {
    "plugins": [
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/logo.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
      ]
    ]
  }
}

应用名称和元数据自定义​

可以修改 app.json 文件中的应用名称和包标识符，以自定义应用名称和其他应用元数据：

{
  "expo": {
    "name": "Your Custom App Name",
    "slug": "your-custom-slug",
    "version": "1.0.0",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourapp"
    },
    "android": {
      "package": "com.yourcompany.yourapp"
    }
  }
}

主题自定义——品牌化​

用户可以基于主题品牌化的需求来自定义颜色、排版、间距和动画。

自定义品牌主题色​

主题颜色在 theme/tokens.ts 文件中定义：

const themes = {
  light: {
    colors: {
      white: "#ffffff",
      black: "#2c3e50",
      bluetooth: "#2c5aa0",
      gray: "#7f8c8d",
      lightGray: "#bdc3c7",
      red: "#e74c3c",
      orange: "#f39c12",
      blue: "#2c5aa0",
      green: "#27ae60",
      yellow: "#f1c40f",
      lightBlue: "rgba(44, 90, 160, .3)",
      bg: "#f5f6f7",
      bg1: "#e8eef7",
      bg2: "#d4e0f0",
      bg3: "#b0c7e3",
      bg4: "rgba(44, 90, 160, 0.15)",
      bg5: "#f8f9fa",
      borderColor: "rgba(218, 218, 218, 0.62)",
      darkBorderColor: "#cbd5e1",
      primary: "#2c5aa0",
      text_primary: "#1e293b",
      text_primary_light: "#334155",
      text_primary_dark: "#0f172a",
      text_secondary: "#64748b",
      text_secondary_light: "#475569",
      text_secondary_dark: "#334155",
      warn: "#b25b00",
      error: "#b71c1c",
      success: "#237804",
      warnBg: "#FFF4D6",
      errorBg: "#FADADA",
      successBg: "#D9F7BE",
    },
  },
  dark: {
    colors: {
      // 暗色主题颜色...
    },
  },
};

自定义排版样式​

排版和间距使用 utils/styling.ts 中定义的响应式缩放函数：

import { scale, verticalScale } from "@/utils/styling";

// 排版使用响应式缩放
export const tokens = {
  fontSize: {
    xs: scale(12),
    sm: scale(14),
    _15: scale(15),
    md: scale(16),
    lg: scale(18),
    xl: scale(22),
  },

  fonts: {
    regular: "'Poppins-Regular', 'Avenir', Helvetica, Arial, sans-serif",
    medium: "'Poppins-Medium', 'Avenir', Helvetica, Arial, sans-serif",
  },

  radius: {
    sm: verticalScale(10),
    md: verticalScale(16),
  },

  spacing: {
    _5: scale(5),
    _10: scale(10),
    _15: scale(15),
    _20: scale(20),
    _30: scale(30),
    _40: scale(40),
  },

  border: {
    defaultWidth: 1.5,
  },
};

自定义组件样式​

可以在 theme/globalStyleSheet.tsx 文件中自定义 UI 组件（如布局、按钮和控件）的样式。

此文件包含：

  • 全局组件样式
  • 布局定义
  • 通用风格样式
  • 跨平台样式一致性

国际化和本地化支持​

国际化配置​

国际化配置在 i18n.ts 文件中定义：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./locales/en.json";

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: en,
    },
  },
  lng: "en",
  fallbackLng: "en",
  interpolation: {
    escapeValue: false,
  },
});

可以配置：

  • 默认语言
  • 后备语言
  • 可用语言环境
  • 日期/时间格式
  • 数字格式

本地化文件​

默认的英文字符串存放在 locales/en.json 文件中。

要添加其他语言，请创建新的翻译文件：

  • locales/es.json 用于西班牙语
  • locales/fr.json 用于法语
  • 以此类推

更改隐私政策和使用条款​

应为公司、产品或服务更新隐私政策和使用条款的 URL。

这两个文档的 URL 在 utils/constants.ts 中配置：

export const TERMS_OF_USE_LINK =
  "https://rainmaker.espressif.com/docs/terms-of-use.html";
export const PRIVACY_POLICY_LINK =
  "https://rainmaker.espressif.com/docs/privacy-policy.html";

请将上述 URL 替换为自己的隐私政策和使用条款文档 URL。

On this page