reactjs - 奇怪的 UI 行为 - React native w/expo

Question

我目前正在使用带有 expo、firebase 和 redux 工具包的 react-native 开发一个应用程序。我有一个超级奇怪的问题，我的购物车物品堆叠在一起并破裂，但是当我删除其中一个，或者在更改少量代码后实时重新加载应用程序时，它似乎工作。不知道是什么导致了这个奇怪的问题。

问题图片：

单击红十字以从购物车中删除单个项目后的外观：

我的样式中没有任何负边距或填充。这是我的代码的相关部分：

购物车卡片组件：

export const CartCard = ({ product }) => {
  const { productName, productImage, sum, quantity } = product;
  const dispatch = useDispatch();
  const x = useRef(new Animated.Value(100)).current;
  useEffect(() => {
    Animated.spring(x, {
      toValue: 0,
      duration: 2500,
      useNativeDriver: true,
    }).start();
  }, [x]);

  return (
    <Animated.View style={{ translateY: x }}>
      <CartCardContainer>
        <CartImageContainer>
          <Image
            resizeMode="contain"
            style={{
              height: "100%",
            }}
            source={{
              uri: productImage,
            }}
          />
        </CartImageContainer>
        <CartDetailsContainer>
          <CartDeleteContainer>
            <DeleteButton
              label="close"
              onPress={() => dispatch(removeFromCart(product))}
            />
          </CartDeleteContainer>
          <CartTitle>{productName}</CartTitle>
          <SmallGap />
          <CartQuantityContainer>
            <QuantityButton
              label="minus"
              onPress={() => dispatch(decrementQuantity(product))}
            />
            <CartQuantity>
              Quantity: <QuantityBoldSpan>{quantity}</QuantityBoldSpan>
            </CartQuantity>
            <QuantityButton
              label="plus"
              onPress={() => dispatch(incrementQuantity(product))}
            />
          </CartQuantityContainer>
          <SmallGap />
          <CartPrice>${sum.toFixed(2)}</CartPrice>
        </CartDetailsContainer>
      </CartCardContainer>
    </Animated.View>
  );
};

我在购物车卡片组件中使用的样式组件（没有不相关的组件，例如文本组件）：

export const CartDetailsContainer = styled.View`
  padding: ${(props) => props.theme.space[2]};
  flex: 0.8;
  background-color: ${(props) => props.theme.colors.bg.secondary};
`;
export const CartImageContainer = styled.View`
  flex: 0.2;
  background-color: ${(props) => props.theme.colors.bg.secondary};
`;
export const CartCardContainer = styled.View`
  margin-horizontal: ${(props) => props.theme.space[3]};
  margin-vertical: ${(props) => props.theme.space[2]};
  flex-direction: row;
  border-radius: 5px;
  flex: 1;
`;
export const CartQuantityContainer = styled.View`
  flex-direction: row;
  align-items: center;
  padding-horizontal: ${(props) => props.theme.space[3]};
`;
export const CartDeleteContainer = styled.View`
  position: absolute;
  z-index: 999;
  right: 3%;
  bottom: 13%;
`;

就是这样。我很抱歉这个长线程，试图让它尽可能详细，这对我来说似乎很奇怪，这是一个样式问题，因为它在某些情况下可以正常工作，如果它是一个样式问题，将无法工作任何情况。

标签： reactjsreact-native