图标的 TouchableOpacity 和 onPress [英] TouchableOpacity and onPress for Icons

问题描述

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

I am trying to use onPress for icons. For this, I thought of using TouchableOpacity but nothing happens when I click on the icon. I don't see any console logs.

我也尝试将图标包装在一个额外的视图中，但这也不起作用.

I also tried wrapping the icon in an additional View but that doesn't work either.

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',
  }
});

它看起来像这样，我点击了圆圈图标的中间.

It looks like this and I click in the middle of the circle icon.

我还能尝试什么?

推荐答案

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

I think the icon is overwriting the touchable component. There is no height and width provided to the touchable opacity. So it has hidden behind the icon. Provide some height and width in the styles of the TouchableOpacity. It should work.

调试时给 TouchableOpacity 添加一些背景色，让你可以清楚地看到 TouchableOpacity 布局.

Add some background color to the TouchableOpacity while debugging, so that you will get a clear view on the TouchableOpacity layout.

这篇关于图标的 TouchableOpacity 和 onPress的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！