React Native中如何在初始<FontAwesomeIcon/>调用外修改其属性？

动态修改FontAwesome图标颜色与大小的方案 #

失效原因说明 #

你之前尝试的方法不生效，核心是三个原因：

• 图标元数据对象本身是配置用的只读数据，不需要修改，样式控制完全在组件渲染层实现
• FontAwesomeIcon组件不会继承父View的color样式，所以包裹外层View修改样式不会生效
• style属性中配置的color优先级低于组件直接传入的color属性，所以写在StyleSheet里的颜色配置不会生效

具体实现步骤 #

• 首先在组件内定义状态存储图标对应的颜色、大小值，和你卡片线条颜色的状态做联动，切换线条颜色时同步更新图标颜色状态：

import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { archive } from '@fortawesome/free-solid-svg-icons';

// 初始值对应你默认的白色、45大小
const [cardIconColor, setCardIconColor] = useState('white');
const [cardIconSize, setCardIconSize] = useState(45);

// 切换卡片线条颜色的逻辑里同步调用setCardIconColor
const toggleLineColor = () => {
  const newColor = cardIconColor === 'white' ? 'black' : 'white';
  setCardIconColor(newColor);
  // 你原有切换线条颜色的逻辑保留
}

• 渲染图标时直接将状态绑定到对应props即可，不需要在style里配置，也不用额外包裹View：

<FontAwesomeIcon 
  icon={archive} 
  color={cardIconColor} 
  size={cardIconSize}
/>

如果你的项目用的是react-native-vector-icons库的FontAwesome组件，用法逻辑完全一致，仅导入和属性名有细微差别：

import FontAwesome from 'react-native-vector-icons/FontAwesome';

<FontAwesome 
  name="archive" 
  color={cardIconColor} 
  size={cardIconSize}
/>

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