React Native开发：如何通过函数设置文本颜色适配UI需求？

步骤1：修复colors.js中的无效颜色值 #

你的colors.js里有两个颜色值多写了一个#，这会导致颜色不生效，先修正：

export default {
  appBackground: '#FBFBFF',
  primary: '#F858A5',
  secondary: '#FEBBDB',
  accent: '#FFE5F2',
  black: '#000000',
  black1: '#0D0D0D',
  black2: '#1A1A1A',
  white: '#FFFFFF',
  white98: '#FAFAFA',
  white96: '#F5F5F5',
  secondaryButtons: '#8FC8E3',
  navBarInactive: '#D7EAF3', // 移除多余的#
  HeadingText: '#9A9A9A', // 移除多余的#
};

步骤2：修正fontStyles.js的属性错误并添加动态颜色支持 #

原代码存在两个关键问题：

• React Native中文本大小属性是fontSize，不是size
• 静态StyleSheet无法动态修改样式，需要通过函数合并颜色配置

修改后的fontStyles.js：

import { StyleSheet } from 'react-native';
import fonts from './fonts';

// 定义基础文本样式
const baseStyles = {
  heading1: {
    fontFamily: fonts.Montserrat,  
    fontWeight: '700', // 建议用字符串值，兼容更多字体
    fontSize: 20,
  },
  heading2: {
    fontFamily: fonts.Montserrat,  
    fontWeight: '700',
    fontSize: 18,
  },
  heading3: {
    fontFamily: fonts.Montserrat,  
    fontWeight: '700',
    fontSize: 16,
  },
  text1: {
    fontFamily: fonts.Montserrat,  
    fontWeight: '500',
    fontSize: 15,
  },
  text2: {
    fontFamily: fonts.Montserrat,  
    fontWeight: '500',
    fontSize: 14,
  },
  text3: {
    fontFamily: fonts.Montserrat,  
    fontWeight: '500',
    fontSize: 13,
  },
  text4: {
    fontFamily: fonts.Montserrat,  
    fontWeight: '500',
    fontSize: 12,
  },
};

const staticStyles = StyleSheet.create(baseStyles);

// 导出工具函数：根据样式类型和颜色返回合并后的样式
export const getStyledText = (styleType, color) => {
  const baseStyle = staticStyles[styleType];
  return baseStyle ? [baseStyle, { color }] : {};
};

// 保留原静态样式，供不需要动态颜色的场景使用
export default staticStyles;

步骤3：在组件中使用动态颜色样式 #

在目标组件中导入工具函数和颜色配置，调用即可：

import { getStyledText } from './fontStyles';
import colors from './colors';

// 使用示例
<Text style={getStyledText('text3', colors.primary)}>{LoginPage.policy}</Text>
<Text style={getStyledText('heading1', colors.HeadingText)}>页面标题</Text>

可选方案：为每个样式单独创建函数 #

如果觉得工具函数不够直观，可以给每个文本样式单独定义带颜色的函数：

// 在fontStyles.js中添加
export const heading1 = (color) => [staticStyles.heading1, { color }];
export const text3 = (color) => [staticStyles.text3, { color }];

// 组件中使用
<Text style={text3(colors.secondary)}>{LoginPage.policy}</Text>

内容的提问来源于stack exchange，提问作者Aabhas Amol