javascript - 图标的 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',
  }
});

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

我还能尝试什么？

标签： javascriptreactjstypescriptreact-nativenative-base

Answer 1

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

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