无法点击 android 中的图标

Question

我有一个屏幕，我会将一些图标呈现为按钮。 它适用于 iOS 但在 Android 上，我无法单击图标。 它与覆盖的 Views/zIndexes 有关。 但我无法弄清楚。

这是我呈现图标的列表组件。

const criteriaList = [{ id: 0, title: 'Nur Frauen', checked: false }];

export const FilterCriteriaList: React.FunctionComponent = () => {


  const handleChange = (index: number) => {
    console.log('cccliiickckk', index);
 };

  return (
    <View style={styles.container}>
      <View style={styles.horizontalLine} />
      {criteriaList.map((item: CriteriaList) => (
        <View style={styles.rowContainer} key={item.id}>
          <View style={styles.criteriaRow}>
            <Icon
              style={styles.icon}
              name={item.checked ? 'dot-circle-o' : 'circle-thin'}
              color="#31C283"
              size={moderateScale(20)}
              onPress={() => handleChange(item.id)}
            />

            <Text style={styles.text}>{item.title}</Text>
          </View>
          <View style={styles.horizontalLine} />
        </View>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  rowContainer: {
    //flex: 1,
    paddingTop: 40,
  },
  criteriaRow: {
    flexDirection: 'row',
    paddingLeft: moderateScale(25),
    alignItems: 'center',
    flex: 1,
    marginTop: 15,
  },
  horizontalLine: {
    width: '100%',
    height: moderateScale(1),
    backgroundColor: '#f0f0f0',
    marginTop: 15,
  },
  icon: {
    paddingBottom: 40,
  },
  text: {
    paddingLeft: moderateScale(15),
    paddingBottom: moderateScale(35),
    marginBottom: moderateScale(15),
    paddingTop: moderateScale(15),
    flex: 1,
  },
  button: {
    backgroundColor: 'red',
    flex: 1,
  },
});

这是上面提到的列表组件的容器。

        <View style={styles.filterCriteriaContainer}>
          <Text style={styles.greyHeadingText}>Weitere Filter</Text>
          <FilterCriteriaList/>
        </View>
...
  filterCriteriaContainer: {
    paddingTop: moderateScale(35),
    zIndex: 1,
  },

我怎样才能解决这个问题？ 我也已经尝试过使用 TouchableOpacity/buttons，但我也无法单击它们。 不知何故，这些观点是重叠的。

Answer 1

我有一个屏幕，我会将一些图标呈现为按钮。 它适用于 iOS 但在 Android 上，我无法单击图标。 它与覆盖的 Views/zIndexes 有关。 但我无法弄清楚。

这是我呈现图标的列表组件。

const criteriaList = [{ id: 0, title: 'Nur Frauen', checked: false }];

export const FilterCriteriaList: React.FunctionComponent = () => {


  const handleChange = (index: number) => {
    console.log('cccliiickckk', index);
 };

  return (
    <View style={styles.container}>
      <View style={styles.horizontalLine} />
      {criteriaList.map((item: CriteriaList) => (
        <View style={styles.rowContainer} key={item.id}>
          <View style={styles.criteriaRow}>
            <Icon
              style={styles.icon}
              name={item.checked ? 'dot-circle-o' : 'circle-thin'}
              color="#31C283"
              size={moderateScale(20)}
              onPress={() => handleChange(item.id)}
            />

            <Text style={styles.text}>{item.title}</Text>
          </View>
          <View style={styles.horizontalLine} />
        </View>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  rowContainer: {
    //flex: 1,
    paddingTop: 40,
  },
  criteriaRow: {
    flexDirection: 'row',
    paddingLeft: moderateScale(25),
    alignItems: 'center',
    flex: 1,
    marginTop: 15,
  },
  horizontalLine: {
    width: '100%',
    height: moderateScale(1),
    backgroundColor: '#f0f0f0',
    marginTop: 15,
  },
  icon: {
    paddingBottom: 40,
  },
  text: {
    paddingLeft: moderateScale(15),
    paddingBottom: moderateScale(35),
    marginBottom: moderateScale(15),
    paddingTop: moderateScale(15),
    flex: 1,
  },
  button: {
    backgroundColor: 'red',
    flex: 1,
  },
});

这是上面提到的列表组件的容器。

        <View style={styles.filterCriteriaContainer}>
          <Text style={styles.greyHeadingText}>Weitere Filter</Text>
          <FilterCriteriaList/>
        </View>
...
  filterCriteriaContainer: {
    paddingTop: moderateScale(35),
    zIndex: 1,
  },

我怎样才能解决这个问题？ 我也已经尝试过使用 TouchableOpacity/buttons，但我也无法单击它们。 不知何故，这些观点是重叠的。