React Native导航栏下拉菜单TouchableOpacity点击异常求助

我在React Native中开发了一个带下拉选项的导航栏组件，下拉按钮和选项均使用TouchableOpacity实现。点击下拉按钮后会显示Account和Sign Out两个选项，目前下拉按钮和Account选项点击正常，但Sign Out存在点击异常：只有点击箭头尖端位置时，点击事件才会触发，其余区域点击无效。

组件代码 #

return (
  <View
    style={[
      dropdownVisible && Platform.OS === 'ios'
        ? styles.containerIos
        : styles.container,
    ]}>
    <TouchableOpacity onPress={() => navigation.openDrawer()}>
      <Image source={bar3} style={{height: 20, width: 20}} />
    </TouchableOpacity>
    <Image source={app_logo} style={styles.logo} />
    <View style={styles.rightContainer}>
      <Image
        source={
          userImage && userImage.length > 1 ? {uri: userImage} : smilyFace
        }
        style={
          userImage && userImage.length > 1
            ? styles.UserProfile
            : styles.userImage
        }
      />
      <TouchableOpacity onPress={handleDropdownPress}>
        <Image
          source={dropdownVisible ? arrowUp : arrowDown}
          style={
            dropdownVisible ? styles.dropdownArrowUp : styles.dropdownArrow
          }
        />
      </TouchableOpacity>
      {dropdownVisible && (
        <View
          style={[
            Platform.OS === 'ios'
              ? styles.dropdownIos
              : styles.dropdownOptions,
          ]}>
          <TouchableOpacity
            onPress={() => accountPress()}
            hitSlop={{left: 20, top: 20, right: 10, bottom: 10}}>
            <Text style={styles.dropdownOptionText}>Account</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => logOutPress()}
            hitSlop={{left: 20, top: 20, right: 10, bottom: 10}}>
            <Text style={styles.dropdownOptionText}>Sign out</Text>
          </TouchableOpacity>
        </View>
      )}
    </View>
  </View>
)

样式表代码 #

container: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignContent: 'space-between',
  alignItems: 'center',
  backgroundColor: white,
  paddingTop: Platform.OS === 'ios' ? 16 : 16,
  paddingBottom: 16,
  paddingHorizontal: 16,
  width: deviceWidth,
},
containerIos: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignContent: 'space-between',
  alignItems: 'center',
  backgroundColor: white,
  paddingVertical: Platform.OS === 'ios' ? 0 : 16,
  top: Platform.OS === 'ios' ? -10 : 0,
  paddingHorizontal: 16,
  width: deviceWidth,
},
leftContainer: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'flex-start',
},
centerContainer: {
  flex: 2,
  justifyContent: 'center',
  alignItems: 'center',
},
rightContainer: {
  alignItems: 'center',
  flexDirection: 'row',
  width: deviceWidth / 6,
  gap: 10,
},
logo: {
  width: 170,
  height: 30,
  resizeMode: 'contain',
  alignSelf: 'center',
  marginLeft: 30,
},
userImage: {
  height: 32,
  resizeMode: 'contain',
  width: 32,
},
UserProfile: {
  width: 30,
  height: 30,
  resizeMode: 'cover',
  borderRadius: 15,
},
dropdownArrow: {
  height: 25,
  width: 25,
},
dropdownArrowUp: {
  height: 10,
  width: 15,
},
dropdownOptions: {
  position: 'absolute',
  top: 40,
  right: 0,
  backgroundColor: white,
  padding: 10,
  borderRadius: 4,
  width: deviceWidth / 2,
  shadowColor: GreyText,
  shadowOpacity: 0.3,
  zIndex: 1,
  elevation: 10,
  shadowOffset: {
  width: 0,
  height: 2,
  },
  shadowRadius: 3.84,
},
dropdownIos: {
  position: 'static',
  top: 60,
  right: deviceWidth * 0.53,
  backgroundColor: white,
  padding: 10,
  borderRadius: 4,
  width: deviceWidth / 2,
  shadowColor: GreyText,
  shadowOpacity: 0.3,
  zIndex: 1,
  elevation: 10,
  shadowOffset: {
    width: 0,
    height: 2,
  },
  shadowRadius: 3.84,
},
dropdownOptionText: {
  color: Black,
  fontSize: FONT_SIZE_16,
  paddingVertical: 4,
},

解决建议 #

1. 修复父容器触摸截断问题
   给rightContainer添加overflow: 'visible'，确保下拉菜单超出父容器宽度的部分能正常接收触摸事件：

   rightContainer: {
     alignItems: 'center',
     flexDirection: 'row',
     width: deviceWidth / 6,
     gap: 10,
     overflow: 'visible', // 添加此行
   },
   

2. 统一iOS下拉菜单定位逻辑
   将dropdownIos的定位改为absolute，避免静态定位导致的布局挤压，让菜单完整展示并响应点击：

   dropdownIos: {
     position: 'absolute', // 替换为absolute
     top: 40, // 和Android保持一致的top值
     right: 0,
     backgroundColor: white,
     padding: 10,
     borderRadius: 4,
     width: deviceWidth / 2,
     shadowColor: GreyText,
     shadowOpacity: 0.3,
     zIndex: 999, // 提高层级避免被遮挡
     elevation: 10,
     shadowOffset: {
       width: 0,
       height: 2,
     },
     shadowRadius: 3.84,
   },
   

3. 让TouchableOpacity充满父容器宽度
   给Sign Out的TouchableOpacity添加flex: 1，确保整个文本区域都能响应点击：

   <TouchableOpacity
     onPress={() => logOutPress()}
     style={{flex: 1}} // 添加此行
     hitSlop={{left: 20, top: 20, right: 20, bottom: 20}}>
     <Text style={styles.dropdownOptionText}>Sign out</Text>
   </TouchableOpacity>
   

4. 调整hitSlop参数
   统一两个选项的hitSlop数值，确保左右侧有足够的点击扩展区域，比如将right设为20，和left保持一致。

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