具有多个 TouchableOpacity 的视图无法在文本上单击，并且如果另一个 TouchableOpacity 位于其上方，则 TouchableOpacity 无法正确单击

Question

我在 React Native 中有一个导航栏组件，它有一个下拉选项。单击下拉菜单后，将出现 2 个选项：“帐户”和“注销”。所有这些下拉菜单和 2 个选项都具有 TouchableOpacity。

下拉 TouchableOpacity 工作正常。下拉菜单中的第一个选项（帐户）也可以使用。但是当我按退出时。这是示例图像，当我按下箭头的间隙时，就会按下“退出”。

 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>

）；

这是我的问题编码。 我已经从react-native导入了TouchableOpacity这也是我的样式表。

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,
},

供您参考，我从上周开始就面临这个问题，并尝试了一切可能的方法，阅读与此相关的每个 stackoverflow 问题，检查 github 问题，询问 AI 聊天。但仍然找不到正确的解决方案。

如果有人能帮助我，那将非常有帮助。我已准备好提供任何其他信息。预先感谢您。

Answer 1

发生这种情况可能是因为您的下拉选项没有占用整个容器宽度，请将其添加到样式中

<TouchableOpacity
   style={styles.dropdownOptionContainer} // add style to touchable
   onPress={() => accountPress()}
   hitSlop={{left: 20, top: 20, right: 10, bottom: 10}}>
   <Text style={styles.dropdownOptionText}>Account</Text>
</TouchableOpacity>
<TouchableOpacity
   style={styles.dropdownOptionContainer} // add style to touchable
   onPress={() => logOutPress()}
   hitSlop={{left: 20, top: 20, right: 10, bottom: 10}}>
   <Text style={styles.dropdownOptionText}>Sign out</Text>
</TouchableOpacity> 

更新样式：

dropdownOptionContainer: {
  flex: 1,
  width: '100%',
},