TouchableOpacity 和 onPress 图标

Question

我正在尝试使用 onPress 作为图标。为此，我想到使用 TouchableOpacity，但是当我单击该图标时没有任何反应。我没有看到任何控制台日志。

我还尝试将图标包装在另一个视图中，但这也不起作用。

const criteriaList = [
    "Nur Frauen",
    "Freunde Zweiten Grades",
]


export const FilterCriteriaList: React.FunctionComponent = () => {
  return (
      <View style={styles.container}>
          <View style={styles.horizontalLine} />
          {criteriaList.map((item: string) => (
        <View key={item}>
            <View style={styles.criteriaRow}>
                <TouchableOpacity style={styles.iconContainer} onPress={()=>console.log('dhjksds')}>
            <Icon style={styles.icon} name="circle-thin" color="#31C283" size={moderateScale(20)}/>
            </TouchableOpacity>
              <Text style={styles.text}>{item}</Text>
              </View>
              <View style={styles.horizontalLine} />
         </View>
      ))}
      </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  criteriaRow: {
      flexDirection: 'row',
      paddingLeft: moderateScale(25),
  },
  horizontalLine: {
    width: '100%',
    height: moderateScale(1),
    backgroundColor: '#E0E0E0',
  },
  text: {
    paddingLeft: moderateScale(15),
    paddingBottom: moderateScale(15),
    marginBottom: moderateScale(15),
    paddingTop: moderateScale(15),
  },
  icon: {
      paddingTop: moderateScale(12),
  },
  iconContainer: {
      backgroundColor: 'red',
  }
});

看起来像这样，然后我单击圆圈图标的中间。

我还能尝试什么？

Answer 1

我认为图标覆盖了可触摸组件。没有为可触摸不透明度提供高度和宽度。所以它隐藏在图标后面。在 TouchableOpacity 的样式中提供一些高度和宽度。应该可以。

在调试时为 TouchableOpacity 添加一些背景颜色，以便您可以清晰地看到 TouchableOpacity 布局。

Answer 2

试试这个...为我工作..我刚刚更改了控制台以进行警报和一些CSS

return (
    <View style={styles.container}>
      <View style={styles.horizontalLine} />
      {criteriaList.map((item, index) => (
        <View key={index}>
          <View style={styles.criteriaRow}>
            <TouchableOpacity
              style={styles.iconContainer}
              onPress={() => alert("ff")}
            >
              <Icon
            style={styles.icon}
            name="circle-thin"
            color="#31C283"
            size={20}
          />
            </TouchableOpacity>
            <Text style={styles.text}>{item}</Text>
          </View>
          <View style={styles.horizontalLine} />
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  criteriaRow: {
    flexDirection: "row",
    padding: 25,
    alignItems: "center",
  },
  horizontalLine: {
    width: "100%",
    height: 1,
    backgroundColor: "#E0E0E0",
  },
  text: {
    paddingLeft: 15,
    paddingBottom: 15,
    marginBottom: 15,
    paddingTop: 15,
  },
  icon: {
    padding: 12,
  },
  iconContainer: {
    backgroundColor: "red",
  },
});