如何在React Native StyleSheet中配置全局设计常量？

我之前使用styled-components时，可以创建全局样式常量实现复用，示例代码如下：

TextInput.tsx #

import React from 'react';
import {TextInputProps} from 'react-native';
import {Label} from './TextInputStyle';

interface ITextInputProps extends TextInputProps {
  label?: string;
}

const TextInput = ({label}: ITextInputProps) => {
  return (
      <Label>{label}</Label>
  );
};

export default TextInput;

TextInputStyle.ts #

export const Label = styled.Text`
  ${Body};
  align-self: flex-end;
`;

typography.ts #

export const Body = css`
  font-family: 'Rubik-Regular';
  font-size: 16px;
  line-height: 22px;
  color: ${DarkGrey2};
`;

我将Body设为可跨styled-components复用的全局常量，现在想知道在React Native StyleSheet中能否实现类似效果。比如不再编写重复样式：

const styles = StyleSheet.create({
  root: {
    display: 'flex',
    flexDirection: 'row',
    paddingVertical: 21,
    textAlign: 'center',
    alignItems: 'center',
  },
});

而是像这样使用全局常量：

const styles = StyleSheet.create({
  root: {
   ...flexCenterRow,
    paddingVertical: 21,
  },
});

对应的全局常量文件：

globalstyles.ts #

export const flexCenterRow = {
    display: 'flex',
    flexDirection: 'row',
    textAlign: 'center',
    alignItems: 'center',
}

完全可以在React Native StyleSheet中实现这种全局样式常量的复用，以下是具体实现方式：

1. 使用对象展开运算符复用样式常量 #

直接借助JavaScript的对象展开运算符（...），就能把全局样式常量合并到组件的StyleSheet配置中，和你预想的用法一致：

步骤： #

• 定义全局样式常量文件globalstyles.ts：

export const flexCenterRow = {
  display: 'flex',
  flexDirection: 'row',
  textAlign: 'center',
  alignItems: 'center',
};

// 同时可以定义排版类全局常量
export const bodyTypography = {
  fontFamily: 'Rubik-Regular',
  fontSize: 16,
  lineHeight: 22,
  color: '#333333', // 替换为DarkGrey2对应的实际色值
};

• 在组件中导入并使用：

import { StyleSheet } from 'react-native';
import { flexCenterRow, bodyTypography } from './globalstyles';

const styles = StyleSheet.create({
  root: {
    ...flexCenterRow,
    paddingVertical: 21,
  },
  label: {
    ...bodyTypography,
    alignSelf: 'flex-end',
  },
});

2. 封装样式合并函数（可选） #

如果需要同时合并多个样式常量，可以封装一个简单的合并函数，提升灵活性：

// globalstyles.ts
export const mergeStyles = (...styles: object[]) => Object.assign({}, ...styles);

// 组件中使用
const styles = StyleSheet.create({
  complexContainer: {
    ...mergeStyles(flexCenterRow, bodyTypography),
    paddingHorizontal: 16,
  },
});

额外优化建议 #

• React Native的StyleSheet.create会对样式做缓存、ID映射等优化，使用展开运算符不会破坏这些特性，因为最终传入的仍是标准对象。
• 建议将颜色、字体大小这类基础设计变量单独放在designTokens.ts文件统一管理，再导入到样式常量文件中，进一步提升设计系统的一致性：

// designTokens.ts
export const COLORS = {
  DarkGrey2: '#333333',
};

export const TYPOGRAPHY = {
  bodyFontSize: 16,
  bodyLineHeight: 22,
};

// globalstyles.ts
import { COLORS, TYPOGRAPHY } from './designTokens';

export const bodyTypography = {
  fontFamily: 'Rubik-Regular',
  fontSize: TYPOGRAPHY.bodyFontSize,
  lineHeight: TYPOGRAPHY.bodyLineHeight,
  color: COLORS.DarkGrey2,
};

内容的提问来源于stack exchange，提问作者Amelia W