行相互重叠答案

【问题标题】：rows overlapping on top of each other行相互重叠
【发布时间】：2020-12-08 16:00:07
【问题描述】：

我映射了一些文本以及一个图标（作为行）。这在 iOS 中运行良好，但在 Android 中行重叠。

const criteriaList = [
  { id: 0, title: 'Noor', checked: false },
  { id: 1, title: 'Friends & Grades', checked: false },

];

列表在FilterCriteriaList 组件中呈现。

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

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

这是我调用组件的地方：

        <View style={styles.filterCriteriaContainer}>
          <Text style={styles.greyHeadingText}>Weitere Filter</Text>
          <FilterCriteriaList/>
        </View>


  filterCriteriaContainer: {
    paddingTop: moderateScale(35),
    zIndex: 1,
  },

零食博览会：

https://snack.expo.io/@nhammad/rude-pizza

在这里，它也适用于网络版本，但如果我尝试 Android 版本，行会重叠。

我该如何解决这个问题？

iOS：

安卓

【问题讨论】：

标签： javascript html css reactjs react-native

【解决方案1】：

您在任何地方都使用了 flex:1，这可能是问题的原因在列表中尝试这些样式，我会保留您的代码以备不时之需。

const styles = StyleSheet.create({
  container: {
    // flex: 1,
    //flexDirection: 'column',
  },
  rowContainer: {
    //flex: 1,
    //lineHeight: 10,
    justifyContent: 'center',
  },
  criteriaRow: {
    flexDirection: 'row',
    paddingLeft: moderateScale(25),
    alignItems: 'center',
    paddingVertical: moderateScale(15),
    //  flex: 1,
  },
  horizontalLine: {
    width: '100%',
    height: moderateScale(1),
    backgroundColor: '#f0f0f0',
    //flex:1,
  },
  text: {
    paddingLeft: moderateScale(15),
    //paddingBottom: moderateScale(15),
    //marginBottom: moderateScale(15),
    //paddingTop: moderateScale(20),
    // flex: 1,
  },
});

【讨论】：

【解决方案2】：

container 缺少 display: 'flex'。然后，从container、rowContainer、criteriaRow、horizontalLine 中去掉flex: 1。您将需要进行一些修改以确保文本与图标一致。我建议摆脱 HorizontalLine 而是设置 CSS borderTop 和 borderBottom 属性。我已经在我的 iPhone 上对此进行了测试。

【讨论】：