React Native中TouchableOpacity内IonIcon点击无法触发onPress

React Native 触摸事件遵循响应者链优先级规则，@expo/vector-icons 渲染的 Ionicons 组件默认会消费自身区域的触摸事件，没有向父级透传；加上你给 TouchableOpacity 设置了 activeOpacity={1}，组件点击时无透明度反馈，进一步导致图标区域的触摸响应优先级高于外层容器，最终出现只有点击图标外的文字区域才会触发 onPress 的现象。

按优先级选择以下修改即可解决问题，优先用第一种改动最小的方案：

• 给所有 Ionicons 组件添加 pointerEvents="none" 属性，让图标本身不拦截任何触摸事件，所有点击动作直接透传给外层的 TouchableOpacity：

// 第一个历史按钮的图标
<Ionicons 
  name="calendar-outline" 
  color={Colors.blue800} 
  size={32}
  pointerEvents="none"
/>
// 第二个文件按钮的图标
<Ionicons 
  name="briefcase-outline" 
  color={Colors.blue800} 
  size={32}
  pointerEvents="none"
/>

• 调整按钮样式，明确可点击区域范围，替换原来 button 样式里的 height: 'auto'，给按钮设置能覆盖图标+文字总高度的最小高度，避免触摸区域计算异常：

button: {
  flex: 1,
  minHeight: 72,
  paddingVertical: 4,
  justifyContent: 'flex-start',
  alignItems: 'center',
},

• 若修改后仍存在偶发点击无响应的情况，给外层包裹的 ScrollView 添加 keyboardShouldPersistTaps="handled" 属性，避免 ScrollView 滚动响应逻辑拦截子组件的点击事件：

<ScrollView 
  style={styles.container}
  contentContainerStyle={{ paddingBottom: 32 }}
  keyboardShouldPersistTaps="handled"
  refreshControl={
    <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
  }
>

修改完成后，点击图标、文字任意按钮内区域都可以正常触发 onPress 回调，原有样式和交互逻辑不会受到影响。

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