React Native自定义Tab按钮如何实现图标与文本整体可点击

问题原因 #

你当前的代码中，仅TapButton图标组件绑定了onPress点击事件，文本Text和图标作为同级节点放在普通不可交互的View容器中，因此只有图标区域能响应点击。

解决方案 #

这里提供两种改动较小的实现方案：

方案1：外层包裹可触摸组件（改动最少） #

直接将每个Tab项的外层容器从普通View替换为React Native自带的可触摸组件，把点击事件移到外层，整块区域即可响应点击。修改后的JSX代码如下：

import { Pressable } from 'react-native' // 顶部引入Pressable，也可以用TouchableOpacity等你习惯的可触摸组件

<View style={styles.gridBox}>
  {
    timeIdArray.map((_id, index) => (
      // 把原来的View替换为Pressable，onPress移到外层
      <Pressable 
        style={(this.state.selectedTab === _id) ? styles.tabItemActive : styles.tabItemInActive} 
        key={index}
        onPress={() => this.changeTab(_id)}
      >
        <TapButton 
          icon={{
            name: timeSlots[_id - 1],
            style:styles.icon,
            type: '_icon', 
            color: (this.state.selectedTab === _id) ? '#01579b' : '#2196F3', 
            size: 30
          }}
          buttonStyle={styles._tab}
          // 移除原来TapButton上绑定的onPress
        />
        <Text style={(this.state.selectedTab === _id) ? styles.tabberLabelActive : styles.tabberLabelInactive}>{_timeIds[_id - 1]}</Text>
      </Pressable>
    ))
  }
</View>

提示：如果需要点击透明度变化的反馈效果，可以把Pressable换成TouchableOpacity，不需要调整其他样式和逻辑。

方案2：将文本塞进TapButton内部（更符合组件规范） #

React Native Elements的Button组件支持自定义子内容，你可以抛弃默认的icon+title结构，直接把图标和文本都作为TapButton的子元素，整块区域默认都是按钮的可点击范围：

import { Icon } from 'react-native-elements' // 顶部单独引入Icon组件

<View style={styles.gridBox}>
  {
    timeIdArray.map((_id, index) => (
      <TapButton
        key={index}
        buttonStyle={[
          styles._tab,
          this.state.selectedTab === _id ? styles.tabItemActive : styles.tabItemInActive
        ]}
        onPress={() => this.changeTab(_id)}
      >
        {/* 把图标和文本都放在TapButton内部，调整样式为垂直排列即可 */}
        <Icon 
          name={timeSlots[_id - 1]}
          style={styles.icon}
          type='_icon' 
          color={this.state.selectedTab === _id ? '#01579b' : '#2196F3'} 
          size={30}
        />
        <Text style={(this.state.selectedTab === _id) ? styles.tabberLabelActive : styles.tabberLabelInactive}>{_timeIds[_id - 1]}</Text>
      </TapButton>
    ))
  }
</View>

提示：如果用这个方案，你需要给_tab补充flexDirection: 'column'样式，保证图标在文本上方垂直排列。

样式适配 #

两种方案都不需要大幅修改原有样式，方案1甚至完全不用调整现有样式代码，只要确保外层可触摸组件没有拦截点击事件的额外配置即可正常运行。

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