نوع رنگ در React Native با TypeScript

من در حال ایجاد یک کامپوننت ساده هستم که یک رنگ را به عنوان پراپ میپذیرد و در پروژهام از تایپاسکریپت استفاده میکنم و میخواهم کاربران را مجبور کنم که فقط مقادیر رنگ معتبر را به کامپوننت از طریق بررسی نوع تایپاسکریپت ارسال کنند. چگونه میتوانم این را با استفاده از ریاکت نیتیو انجام دهم؟ از چه نوعهایی باید استفاده کنم؟

const TextBody = ({
  color
}: {color: //Need This}) => {
  return (
    <Text
      style={[
        generalStyles,
        textTransformStyle,
        textAlignStyle,
        selfAlignmentStyle,
        typography?.body,
        style,
      ]}
    >
      {children}
    </Text>
  );
};

export { TextBody };

کاربران باید بتوانند رنگها را به صورت زیر ارسال کنند

<TextBody color="red"/>
<TextBody color="#21292F"/>
<TextBody color={rgba(12,2,1,0)}/>

و این باید یک خطا ایجاد کند

<TextBody color={5252}/>

پاسخ شماره ۱

متأسفم دوستان، یک راه حل پیدا کردم اما نتوانستم مدت طولانی سؤال را بهروزرسانی کنم،

برای اعمال بررسی نوع برای مقادیر رنگ معتبر در یک کامپوننت React Native با استفاده از TypeScript، میتوانیم از نوع ColorValue که توسط React Native ارائه شده است، استفاده کنیم. این نوع نمایانگر یک مقدار رنگ معتبر است که میتواند در استایلها استفاده شود.

در اینجا یک نمونه پیادهسازی برای یک کامپوننت TextBody آورده شده است:

import { Text, TextStyle, ColorValue } from 'react-native';

interface TextBodyProps {
  color: ColorValue;
}

const TextBody: React.FC<TextBodyProps> = ({ color, children }) => {
  const textStyles: TextStyle[] = [
    generalStyles,
    textTransformStyle,
    textAlignStyle,
    selfAlignmentStyle,
    typography?.body,
    style,
  ];

  return (
    <Text style={[...textStyles, { color }]}>
      {children}
    </Text>
  );
};

export { TextBody };

در این مثال، رابط TextBodyProps با ویژگی color از نوع ColorValue تعریف شده است، که نمایانگر یک مقدار رنگ معتبر برای استایلهای React Native است.

کاربران اکنون میتوانند مقادیر رنگ معتبر را به عنوان props ارسال کنند، شامل نام رنگها، کدهای هگز و مقادیر RGBA، همانطور که در مثالهای زیر نشان داده شده است:

<TextBody color="red" />
<TextBody color="#21292F" />
<TextBody color="rgba(12, 2, 1, 0)" />

اگر یک کاربر سعی کند یک مقدار رنگ نامعتبر وارد کند، مانند یک عدد (۵۲۵۲ در مثال زیر)، تایپاسکریپت یک خطای نوع صادر خواهد کرد:

<TextBody color={5252} /> // Throws a type error

اطمینان حاصل کنید که پیکربندیهای لازم TypeScript و React Native را در پروژه خود داشته باشید تا بررسی نوع فعال شود.

با استفاده از نوع ColorValue، میتوانید بررسی نوع را اعمال کنید و اطمینان حاصل کنید که تنها مقادیر رنگ معتبر به کامپوننتهای React Native شما منتقل میشوند.