StyleSheet — 是什么，在 React Native 中创建样式

什么是 StyleSheet？

StyleSheet — React Native 内置的用于定义组件样式的 API。与 Web 开发中的 CSS 不同，RN 使用 JavaScript 对象来描述样式。StyleSheet.create — 关键方法，接收一个包含样式的对象并返回一个包含数字标识符的对象。

StyleSheet 是 React Native 核心的一部分，不需要安装额外的包。根据 Meta（2026）的数据，95% 的 React Native 项目使用 StyleSheet.create 来处理静态样式。替代方案：styled-components、Emotion、NativeWind（Tailwind for RN）——但内置的 StyleSheet 仍然是核心的标准。

历史与演变

在 React Native 的早期版本（2015）中，样式完全通过内联对象定义。StyleSheet.create 在 RN 0.4 中作为优化出现。概念来自 CSS：将样式与逻辑分离以提高可读性和性能。多年来，API 不断扩展：增加了 absoluteFill、hairlineWidth、flatten。

StyleSheet.create 与内联样式

StyleSheet.create 和内联样式之间的区别对性能至关重要。内联样式 —— 一个普通的 JavaScript 对象，在组件的每次渲染时创建。StyleSheet.create —— 一个在模块加载时创建一次并转换为数字 ID 的对象。

在传递内联样式时，React Native 每次都会通过 JavaScript-Native 桥发送整个对象。对于一个具有复杂样式的组件，这意味着每次渲染都要传递数十个属性。StyleSheet.create 只传递一个数字标识符，从而减少桥的负载。

// StyleSheet.create — 优化方法
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Inline style — 每次渲染时创建新对象
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

何时使用内联：对于依赖于状态的动态样式（pressed、selected、active）。对于静态样式，始终使用 StyleSheet.create。规则：静态 → create，动态 → 内联函数。

通过 StyleSheet 进行 Flexbox 布局

Flexbox — React Native 中唯一的布局机制（不支持 CSS Grid，float 不存在）。StyleSheet.create 用于描述 flex 容器及其子元素。主要属性：flex（填充系数）、flexDirection（row | column）、justifyContent、AlignItems。

默认情况下，React Native 中的 flexDirection 是 column（在 CSS 中 —— row）。这是从 Web 开发过渡时需要记住的第一件事。所有 View 默认都是 flex 容器。要居中一个元素，使用 AlignItems：'center' + justifyContent：'center'。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

重要：在 React Native 中，所有尺寸都不带单位指定（只是一个数字）。百分比有效，但仅适用于相对于父元素的 width 和 height。margin 和 padding 接受数字。为了适应性，使用 flex 而不是百分比 —— 这在不同屏幕上都更可靠。

StyleSheet API：create、flatten、hairlineWidth、absoluteFill

StyleSheet API 除了 create 之外还包括几个方法。StyleSheet.flatten 将样式数组合并为一个对象 —— 对于组合和将样式传递给第三方组件非常有用。StyleSheet.hairlineWidth 返回设备上最小可见线的宽度。

StyleSheet.absoluteFill —— 预定义样式 { position：'absolute'，top：0，left：0，right：0，bottom：0 }。用于覆盖层、模态窗口和全屏绝对定位。StyleSheet.absoluteFillObject —— 相同的东西，但以对象形式提供以便扩展。

// flatten — 合并样式
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — 最小线条
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth 对分隔线和边框很有用 —— 无论屏幕密度如何，它始终看起来像 1 个物理像素。在 Retina 显示屏上，这是 0.5 逻辑点，在普通显示屏上 —— 1 点。不要对必须具有严格定义大小的元素使用 hairlineWidth。

使用 Dimensions API 进行自适应布局

Dimensions API 与 StyleSheet 一起用于适应不同屏幕大小的响应式布局。Dimensions.get('window') 返回窗口的宽度和高度。要在屏幕旋转时进行响应更新，请使用 React Native 的 useWindowDimensions 钩子。

尽管 StyleSheet.create 不像 CSS 那样支持媒体查询，但您可以在 create 内部基于 Dimensions 计算值，或通过函数使用动态样式。对于断点，为不同的宽度范围创建单独的样式。

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions 在屏幕旋转和具有 Split View 的平板电脑上窗口大小更改时自动更新。对于 SSR（React Native Web），确保 Dimensions.get 在组件挂载后被调用，以避免服务器和客户端之间的差异。

项目中的样式组织

项目中 StyleSheet 的组织 影响代码的可维护性和可重用性。三种方法：组件内部的局部样式（组件旁边的 styles.js）、全局样式（包含颜色、间距、排版常量的 theme.js）以及通过组合实现的模块化样式。

推荐结构：theme.js 包含颜色、大小和排版的常量；Component.styles.js 放在每个组件旁边，用于其特定样式；StyleSheet.flatten 用于组合基本样式和特定样式。对于大型项目，使用带有主题生成的 Design System。

// theme.js — 全局常量
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

模块化组织的优势：颜色和间距的单一真实来源，简化重构（更改了 primary —— 所有按钮都更新了），通过 flatten 实现样式重用，代码的可读性和可预测性。对于 TypeScript 项目，通过 declare module 为主题添加类型。