React Native主题切换、字号调整：不用styled-components也能玩出花

React Native主题切换：不用styled-components也能玩出花

“你知道吗？只用React Native自带的工具，不到100行代码就能实现媲美大厂App的主题、字号切换效果！” 作为一个被产品经理反复要求"加个深色模式"的前端码农，我曾经也以为非得用styled-components这类库才能优雅地管理主题——直到我发现React Native自己就藏着这么一套"秘密武器"。

一、为什么你需要的可能不是styled-components

每次新建项目就npm install styled-components已经成了肌肉记忆？等下，先别急，让我们来聊聊这个选择的代价：

1. 包体积增加：你的node_modules又悄悄胖了30KB
2. 学习曲线：新队友得先学会这套DSL语法
3. 调试困难：DevTools里看到的都是生成的class名
4. 性能损耗：运行时动态生成样式对象总比静态的慢那么一丢丢

上周我接手了一个老项目，发现他们用纯React Context + StyleSheet实现的主题系统，代码简洁得像没谈过恋爱的小姑娘：

// 就这么简单粗暴，但简直好用到哭
const Text = ({
     style, children }) => {
   
  const {
    colors, fonts } = useTheme();
  return (
    <RNText style={
   [{
    color: colors.text }, fonts.regular, style]}>
      {
   children}
    </RNText>
  );
};

二、手把手打造极简主题系统

2.1 先来定义我们的主题"菜单"

想象你在设计一个调色板、字号管理器，不过这次是用代码：

// themes.ts
export const lightTheme = {
   
  colors: {
   
    background: "#FFFFFF",    // 洁白如雪
    text: "#333333",          // 深夜黑
    primary: "#4A90E2",       // 微信蓝
    danger: "#FF5A5F",        // 警示红
  },
  typography: {
   
    xl: 24,    // 超大标题
    lg: 20,    // 大标题
    md: 16,    // 正文
    sm: 14,    // 辅助文字
  },
};

export const darkTheme = {
   
  colors: {
   
    background: "#121212",    // 深空灰
    text: "#F5F5F5",          // 月光白
    primary: "#6BB9F0",       // 更亮的蓝
    danger: "#FF7675",        // 柔和的红
  },
  typography: {
    ...lightTheme.typography } // 字号保持一致
};

2.2 造一个主题、字号调整"遥控器"

这个Provider就像你家的灯光总开关：

// ThemeProvider.tsx
import React, {
    createContext, useState } from "react";
import {
    lightTheme, darkTheme } from "./themes";

type ThemeContextType = {
   
  theme: typeof lightTheme;
  isDark: