如何动态更改数组中显示的样式文本组件的属性？

Question

我有一个显示数组中数字的组件。我使用带样式的组件为这些数字设置样式。但是，我想这样做，如果数字低于或等于变量（填充：数字），则更改颜色以使其看起来已填充。因此，如果填充 === 5，则填充 1-5 中的所有数字in. 这是我的代码：

export interface ILoyaltyStatusProps {
  filled: number;
  orderCount: {
    orderNumber: number;
  }[];
  statusTier: string;
  points: number;
}

export const LoyaltyStatus: React.FC<ILoyaltyStatusProps> = ({
  filled,
  orderCount,
  statusTier,
  points,
  ...props
}) => {
  const displayOrders = () =>
    orderCount.map((ORDERS) => (
      <OrderTextContainer>
        <OrderText>{ORDERS.orderNumber}</OrderText>
      </OrderTextContainer>
    ));
return (
    // eslint-disable-next-line react/jsx-props-no-spreading
    <Container {...props}>
      <InnerContainer>
        <MainContentContainer>
          <TitleText>{`Unlock ${statusTier} Status`}</TitleText>
          <SubText>{`Just order ${orderCount.length} times this month.`}</SubText>
          <OrderContainer>{displayOrders()}</OrderContainer>
        </MainContentContainer>
        <FooterContentContainer>
          <PointsText>
            {`You'll earn ${points} points per dollar when you unlock ${statusTier} Status.`}
          </PointsText>
        </FooterContentContainer>
      </InnerContainer>
      <IconContainer>
        <LockIcon />
      </IconContainer>
    </Container>
  );
};

样式如下：

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

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

const OrderText = styled(Text).attrs(() => ({
  type: TextTypes.H4,
}))`
  border: ${({theme}) => theme.colors.lightGreyBackground}};
  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;
`;

我正在使用故事书填充数据，组件如下所示：picture of my component

这是我的故事书文件：

import {LoyaltyStatus} from '@molecules/LoyaltyStatus';
import {storiesOf} from '@storybook/react-native';
import React from 'react';

const dummy = [
  {id: 1},
  {id: 2},
  {id: 3},
  {id: 4},
  {id: 1},
  {id: 2},
  {id: 3},
  {id: 4},
  {id: 4},
];

storiesOf('Loyalty Status', module).add('Default', () => (
  <LoyaltyStatus
    statusTier="Gold"
    points={10}
    orderCount={dummy.map((order) => ({
      orderNumber: order.id,
    }))}
  />
));

基本上，我只需要填写前面的所有数字并包括已填写的变量，以使它们显示为已兑换。有人知道如何在 React-native 打字稿中做到这一点吗？

编辑： 我最终找到了解决问题的方法，但是它是通过像图章一样使用绝对位置在旧圆上覆盖一个新圆来完成的。


const displayOrders = () =>
    orderCount.map((ORDERS) => (
      <OrderTextContainer>
        <OrderText>{ORDERS.orderNumber}</OrderText>
        {ORDERS.orderNumber <= filled && (
          <FilledOrderText>STAMPED</FilledOrderText>
        )}
      </OrderTextContainer>
    ));

Answer 1

参考样式组件的文档，我接下来会尝试做。

更新映射订单的函数：

const displayOrders = () =>
    orderCount.map((ORDERS) => (
      <OrderTextContainer>
        <OrderText filled={ORDERS.orderNumber === filled}>
           {ORDERS.orderNumber}
        </OrderText>
      </OrderTextContainer>
    ));

然后像这样更新您的样式：

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

但是我不知道你想改变什么样式所以背景只是一个例子。

希望能帮到你

P.S：这个解决方案没有打字稿所以一定要自己添加:)

如何动态更改数组中显示的样式文本组件的属性？

How to change the properties of a styled text component dynamically that is displayed within an array?

css

typescript

react-native

styled-components

storybook