React Native中如何移除或修改Icon按钮 onPress的方形效果

问题 #

使用Ionicons提供的图标作为按钮时，点击会出现方形点击反馈效果，需要禁用该效果或改为圆形。

用户原始代码：

import { View, StyleSheet,Pressable } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
   
    <View>
    <Ionicons name='settings' size={24} color={'black'} onPress={() => {console.log("bingo")}} />

</View>

  </View>
  );
}

const styles = StyleSheet.create({ 
 
});

解决方案1：禁用点击反馈效果 #

通过Pressable组件包裹图标，完全自定义点击反馈逻辑，禁用默认的方形效果：

import { View, StyleSheet, Pressable } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Pressable
        onPress={() => {console.log("bingo")}}
        android_ripple={null} // 关闭Android原生涟漪效果
        style={({ pressed }) => ({
          opacity: pressed ? 0.8 : 1 // 可选：添加轻微透明度变化作为点击反馈
        })}
      >
        <Ionicons name='settings' size={24} color={'black'} />
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({});

解决方案2：改为圆形点击反馈效果 #

用Pressable创建圆形容器，同时配置圆形的点击反馈样式：

import { View, StyleSheet, Pressable } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Pressable
        onPress={() => {console.log("bingo")}}
        style={({ pressed }) => [
          styles.iconWrapper,
          { backgroundColor: pressed ? '#f0f0f0' : 'transparent' }
        ]}
        android_ripple={{ color: '#f0f0f0', radius: 24 }} // Android圆形涟漪效果
      >
        <Ionicons name='settings' size={24} color={'black'} />
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  iconWrapper: {
    width: 48,
    height: 48,
    borderRadius: 24, // 设为圆形容器
    justifyContent: 'center',
    alignItems: 'center',
  }
});

说明 #

• 使用Pressable替代Ionicons自带的onPress，可以完全控制点击反馈的样式，避免默认方形效果。
• 圆形方案中，容器大小和半径可以根据图标的尺寸调整，确保点击区域和反馈效果都为圆形。

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