Javascript 无法在android中单击图标

我有一个屏幕，我将渲染一些图标作为按钮。它在iOS上工作，但在Android上，我无法点击图标。它与重叠视图/zindex有关。但是我想不出来

这是我的列表组件，我在其中渲染图标

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

const criteriaList=[{id:0，title:'Nur Frauen'，checked:false}]；
导出常量FilterCriteriaList:React.FunctionComponent=（）=>{
常量handleChange=（索引：number）=>{
console.log（'cccliiickk'，index）；
};
返回(
{criteriaList.map（（项：criteriaList）=>(
handleChange（item.id）}
/>
{item.title}
))}
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
},
行容器：{
//弹性：1，
paddingTop:40，
},
标准行：{
flexDirection:'行'，
填充左侧：中等比例（25），
对齐项目：“居中”，
弹性：1，
玛金托普：15，
},
水平线：{
宽度：“100%”，
高度：中等比例（1），
背景颜色：“#f0”，
玛金托普：15，
},
图标：{
填充底部：40，
},
正文：{
填充左侧：中等比例（15），
填充底部：中等比例（35），
marginBottom：中等比例（15），
paddingTop：中等比例（15），
弹性：1，
},
按钮：{
背景颜色：“红色”，
弹性：1，
},
});

这是上述列表组件的容器

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

韦特尔滤波器
...
过滤器标准容器：{
paddingTop：中等比例（35），
zIndex:1，
},

我怎样才能解决这个问题？我已经尝试过使用TouchableOpacity/按钮，但我也不能点击它们。不知怎的，视图重叠了。

试试这个

handleChange（item.id）}>
{item.title}

您可以添加一张您得到的照片吗。还可以继续使用按钮进行尝试，内部行容器使用zIndex:1进行尝试，位置：'absolute'，宽度：'100%，

<TouchableOpacity style={styles.criteriaRow}
      onPress={() => handleChange(item.id)}>
       <View>
        <Icon
          style={styles.icon}
          name={item.checked ? 'dot-circle-o' : 'circle-thin'}
          color="#31C283"
          size={moderateScale(20)}
        />
        <Text style={styles.text}>{item.title}</Text>
       </View>
      </TouchableOpacity>