React Native中FontAwesomeIcon在TouchableHighlight/Pressable内无法工作

问题重现 #

将FontAwesomeIcon直接放在TouchableHighlight内部时触发错误：

ERROR  TypeError: Cannot read property 'color' of undefined
This error is located at:
    in FontAwesomeIcon (created by Page)
    in RCTView (created by View)
    in View (created by TouchableHighlight)
    in TouchableHighlight (created by TouchableHighlight)
    in TouchableHighlight (created by Page)
...

对应代码：

<TouchableHighlight onPress={someOnPressMethod}>
    <FontAwesomeIcon icon={faPlus} color='white'/>
</TouchableHighlight>

图标放在组件外部可正常显示。

解决方案 #

1. 给图标套一层View隔离props传递 #

TouchableHighlight会向直接子组件传递额外的内部props，干扰FontAwesomeIcon的属性解析，套View可隔离这些传递：

<TouchableHighlight onPress={someOnPressMethod}>
  <View>
    <FontAwesomeIcon icon={faPlus} color='white' />
  </View>
</TouchableHighlight>

2. 使用Pressable的函数式子元素 #

Pressable支持以函数作为子元素，能避免不必要的props传递，还可直接处理按压状态：

<Pressable onPress={someOnPressMethod}>
  {({ pressed }) => (
    <FontAwesomeIcon 
      icon={faPlus} 
      color='white' 
      style={{ opacity: pressed ? 0.7 : 1 }} 
    />
  )}
</Pressable>

3. 检查导入和版本兼容性 #

确保图标和库的导入路径正确：

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

若版本不兼容，尝试升级到@fortawesome/react-native-fontawesome的稳定版本，或降级匹配项目依赖。

原因说明 #

TouchableHighlight的内部实现会将自身的部分props（如容器样式相关属性）传递给直接子组件，而FontAwesomeIcon组件未处理这些额外props，导致内部解析color属性时出现undefined的情况，通过View隔离或使用Pressable的函数子元素可规避该问题。

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