React Native主题切换、字号调整：不用styled-components也能玩出花
React Native主题切换：不用styled-components也能玩出花
“你知道吗？只用React Native自带的工具，不到100行代码就能实现媲美大厂App的主题、字号切换效果！” 作为一个被产品经理反复要求"加个深色模式"的前端码农，我曾经也以为非得用styled-components这类库才能优雅地管理主题——直到我发现React Native自己就藏着这么一套"秘密武器"。
一、为什么你需要的可能不是styled-components
每次新建项目就npm install styled-components已经成了肌肉记忆？等下，先别急，让我们来聊聊这个选择的代价：
- 包体积增加：你的node_modules又悄悄胖了30KB
- 学习曲线：新队友得先学会这套DSL语法
- 调试困难：DevTools里看到的都是生成的class名
- 性能损耗：运行时动态生成样式对象总比静态的慢那么一丢丢
上周我接手了一个老项目，发现他们用纯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: