React Native中如何去除Icon.Button按下时的黑色方块样式？

你看到的这个黑色方块，是Icon.Button默认的触摸高亮反馈效果，给你两种解决办法：

方法一：直接禁用触摸透明度反馈 #

Icon.Button支持pressOpacity属性，把它设为0就能彻底去掉这个黑色高亮：

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

<Icon.Button
    name='chevron-down'
    backgroundColor='transparent'
    color='#000000'
    padding={0}
    size={30}
    onPress={() => setIsCollapsed(false)}
    pressOpacity={0} // 新增这一行
/>

方法二：自定义触摸容器 #

如果第一种方法没生效，你可以抛弃Icon.Button的默认触摸实现，用TouchableWithoutFeedback包裹普通的Icon组件：

import Icon from 'react-native-vector-icons/FontAwesome';
import { TouchableWithoutFeedback } from 'react-native';

<TouchableWithoutFeedback onPress={() => setIsCollapsed(false)}>
    <Icon
        name='chevron-down'
        color='#000000'
        size={30}
        style={{ padding: 0 }}
    />
</TouchableWithoutFeedback>

这样既保留了图标点击功能，又不会出现烦人的黑色方块。

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