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

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}};
  
`;

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

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 中围绕圆圈设置的固定高度和宽度。仔细一想，原来是这个问题。

在我发布的第二张图片中，容器中的元素之间存在巨大差距。它们在一行中正确显示，并且行正在换行，但是行之间有一个巨大的 space。这是因为 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 使其行为类似于常规视图但具有垂直滚动？

How to properly fix ScrollView to behave similar to a regular view but with a vertical scroll?

css

react-native

scrollview

styled-components