Question

我创建了一个组件，其中在容器中显示了多个圆圈，但是当我经过两行时，它会破裂并从容器中溢出。我试图用滚动视图来解决这个问题，但是即使我放置了相同的样式，滚动视图也有一些奇怪的行为。我不知道如何解决这个问题，有人有任何解决方案吗？

这是滚动视图之前的样子：

const OrderContainer = styled.View`
  flex-direction: row;
  flex-wrap: wrap;
  flex-grow: 1;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: ${({theme}) => theme.colors.salmon}};
  
`;

How come for loops in C# are so slow when concatenating strings?

这是在滚动视图之后，具有相同的样式，但由于某种原因，它看起来很混乱：

const OrderContainer = styled(ScrollView).attrs(() => ({
  contentContainerStyle: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    flexGrow: 1,
    justifyContent: 'center',
  },
}))`
  width: 100%;
  height: 100%;
  padding: 10px;
  background: ${({theme}) => theme.colors.salmon}};
`;

看起来像这样，只向下滚动到 15。

如何让它看起来像原始视图，但只是向下滚动？

以下是容器和树中的其他组件：

const OrderTextContainer = styled.View`
  flex-direction: column;
  height: 40%;
  width: 19%;
  padding: 10px;
  background: ${({theme}) => theme.colors.pink}};
  position: relative;
`;

const OrderText = styled(Text).attrs(() => ({
  type: TextTypes.H4,
}))`
  border: ${({theme}) => theme.colors.border}};
  background: ${({theme}) => theme.colors.background}};
  color: ${({theme}) => theme.colors.text};
  text-align: center;
  padding-top: 5px;
  width: 35px;
  height: 35px;
  border-radius: 999px;
  border-width: 3px;
`;


 const displayOrders = () =>
    populateArray(orderCount).map((ORDERS) => (
      <OrderTextContainer>
        <OrderText>{ORDERS}</OrderText>
        {ORDERS <= filledOrders && <CrownIcon />}
      </OrderTextContainer>
    ));

  return (
    // eslint-disable-next-line react/jsx-props-no-spreading
    <Container {...props}>
      <InnerContainer>
        <MainContentContainer>
          <TitleText>{`Unlock ${statusTier} Status`}</TitleText>
          <SubText>{`Just order ${orderCount} times this month.`}</SubText>
          <OrderContainer>{displayOrders()}</OrderContainer>
        </MainContentContainer>
        <FooterContentContainer>
          <BurgerIconContainer>
            <BurgerIcon />
          </BurgerIconContainer>
          <PointsTextContainer>
            <PointsText>
              {`You'll earn `}
              <BoldedPointsText>{`${points} points`}</BoldedPointsText>
              {` per dollar when you unlock ${statusTier} Status.`}
            </PointsText>
          </PointsTextContainer>
        </FooterContentContainer>
      </InnerContainer>
      <IconContainer>
        <LockIcon />
      </IconContainer>
    </Container>
  );
};

Answer 1

我的问题的解决方案：

这里的问题不在于我切换到 ScrollView 的 OrderContainer。这工作正常，不需要对我在 ContentContainerStyle 中放置的内容进行任何调整。

问题在于我在 OrderTextContainer 中围绕圆圈设置的固定高度和宽度。仔细想想，这正是问题所在。

在我贴的第二张图片中，容器中的元素之间存在巨大的差距。它们在一行中正确显示，并且该行正在换行，但是行之间有很大的空间。这是因为 OrderTextContainer 每次都会生成，高度为 40%，宽度为 19%。解决方案是删除高度和宽度百分比，并让 if 自行填充，因为它应该是由于 flex 行为。

在反思中，我会告诉其他人确保你知道你的元素是如何被映射的，并试验你编写的每一行 CSS，如果你的代码的某些部分看起来有些随意，而你的代码不是行为符合预期，通常是任意代码。

固定代码：

const OrderContainer = styled(ScrollView).attrs(() => ({
  contentContainerStyle: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    flexGrow: 1,
    justifyContent: 'center',
  },
}))`
  width: 100%;
  height: 100%;
  background: ${({theme}) => theme.colors.background}};
  overflow: hidden;
`;

const OrderTextContainer = styled.View`
  flex-direction: column;
  padding: 10px;
  background: ${({theme}) => theme.colors.background}};
  position: relative;
`;

如何正确修复 ScrollView 使其行为类似于常规视图但具有垂直滚动？

1 个答案: