React Native中如何在data.subcategories为空时禁用FlatList项的onPress

你可以通过两种方式实现禁用无后续内容项的点击事件：

方式一：在 onPress 中添加判断逻辑 #

直接在点击回调里检查当前 item 的 subcategories 长度，只有当它大于 0 时才执行导航操作：

<TouchableOpacity
  onPress={() => {
    // 仅当存在子分类时才触发导航
    if (item.subcategories?.length > 0) {
      navigation.navigate("groepen", { subcategories: item.id });
    }
  }}
>
  <Spacer position="bottom" size="large">
    <SubCategoryInfoCard subcategories={item} />
  </Spacer>
</TouchableOpacity>

方式二：使用 TouchableOpacity 的 disabled 属性（推荐） #

通过 disabled 属性直接禁用点击，同时调整透明度让用户直观感知该项不可点击：

<TouchableOpacity
  // 当子分类为空时禁用点击
  disabled={item.subcategories?.length === 0}
  onPress={() => navigation.navigate("groepen", { subcategories: item.id })}
  // 禁用时降低透明度，提示不可交互
  style={{ opacity: item.subcategories?.length === 0 ? 0.5 : 1 }}
>
  <Spacer position="bottom" size="large">
    <SubCategoryInfoCard subcategories={item} />
  </Spacer>
</TouchableOpacity>

说明 #

• 使用可选链操作符 ?. 是为了避免 item.subcategories 为 undefined 时出现报错；
• 方式二更符合用户体验，因为视觉上会明确提示该项无法点击。

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