مكتبات المكونات عبارة عن مجموعة من التعليمات البرمجية القابلة للتخصيص والقابلة لإعادة الاستخدام والتي يمكن إجراؤها لتناسب نمط تصميم تطبيق معين. إنها تساعد في الحفاظ على تصميم متسق عبر الأنظمة الأساسية وتسريع عملية التطوير.
ستتعلم هنا كيفية استخدام مكتبة مكونات React Native Elements عند إنشاء تطبيق React Native التالي.
ما هي العناصر الأصلية للتفاعل؟
يُعد React Native Elements (RNE) جهدًا مفتوح المصدر من قِبل مطوري React Native لإنشاء مكتبة مكونات يمكن أن تكون مفيدة عند إنشاء تطبيقات Android و iOS وتطبيقات الويب. وخلافا للعديد مكتبات مكونات React Native الأخرى، RNE يدعم بناء جملة TypeScript.
تتكون المكتبة من أكثر من 30 مكونًا تركز على بنية المكون.
تثبيت العناصر الأصلية التفاعلية باستخدام واجهة سطر الأوامر التفاعلية التفاعلية
التعليمات التالية هي لتثبيت عناصر React Native في مشروع تم إنشاؤه باستخدام React Native cli.
قم بتثبيت React Native Elements في تطبيق React Native الخاص بك عن طريق تشغيل:
تثبيت npm تضمين التغريدة/themed تضمين التغريدة/base
يجب عليك أيضًا تثبيت رموز متجهة تفاعلية وسياق منطقة آمنة:
npm ثَبَّتَ تتفاعل-محلي-تفاعل-الرموز-محلي-آمن-منطقة-سياق
كيفية تثبيت React Native Elements في مشروع إكسبو
لتثبيت عناصر React Native في ملف اكسبو مشروع ، قم بتثبيت الحزمة وتفاعل - أصلي - منطقة آمنة - سياق:
إضافة الغزل تضمين التغريدة/themed تضمين التغريدة/ رد فعل قاعدة-محلي-سياق المنطقة الآمنة
احتفظ بمدير حزمة واحد مثل npm أو الغزل أثناء تثبيت الحزم لتجنب مخاطر تضارب التبعية.
تحتوي المشاريع التي تم إنشاؤها باستخدام expo cli على رموز متجهة تفاعلية أصلية مثبتة بشكل افتراضي ، لذلك لا تحتاج إلى تثبيتها.
تصميم مكونات العناصر الأصلية ذات التفاعل الفردي
تتخذ جميع المكونات المتاحة من خلال RNE دعامات مختلفة لتصميم المكون وحاوية المكون.
حاوية المكون أساسية علامة التفاف حول علامة مكون ، مثل. ال العلامة التي لا تقهر حول المكون وتأخذ الحاوية دعم لتطبيق أنماط العرض.
يمكن للمكون تلقي دعائم التصميم الافتراضية مثل لون, يكتب، و مقاس. يمكن للمكون أيضًا تلقي خاصية نمط مخصص فريد للتعامل مع أنماط المكون.
هذه كلها أنماط خارجية للمكون.
على سبيل المثال ، تصميم ملف زر عنصر:
يستورد { منظر } من "رد فعل أصلية" ؛
يستورد { زر } من "@ rneui / تحت عنوان" ؛
مقدار ثابت MyComponent = () => {
يعود (
<منظر>
<زر
buttonStyle = {{لون الخلفية: "رمادي" }}
containerStyle = {{العرض: 150}}
>
زر متصل
</Button>
<زر
اكتب ="الخطوط العريضة"
containerStyle = {{العرض: 150 ، الهامش: 10}}
العنوان ="زر مخطط تفصيلي"
/>
</View>
);
}
يوضح الكود أعلاه كيف يمكنك تطبيق الأنماط على مكون الزر. يستخدم زر واحد افتراضيًا يكتب prop ، والآخر يستخدم العرف زر دعم. يستخدم كلا الزرين أيضًا ملف الحاوية دعامة لإضافة أنماط العرض.
إنشاء سمات لمكونات العناصر الأصلية لـ React
يعد إنشاء سمات لمكونات RNE مفيدًا عندما تريد تطبيق نمط على كل مثيل من هذه المكونات. باستخدام السمات ، يصبح تخصيص مكوناتك لتلائم نمط التصميم المطلوب مهمة سهلة.
يوفر RNE ملف createTheme () وظيفة لمكونات النمط. ستحتفظ هذه الوظيفة بأنماط السمة التي تتجاوز الأنماط الداخلية أو الافتراضية لكل مكون.
لإنشاء موضوع ، اتصل createTheme () وتمرير أنماط النسق المطلوبة كوسيطة دالة:
يستورد {ThemeProvider ، createTheme} من "@ rneui / تحت عنوان" ؛
مقدار ثابت الموضوع = createTheme ({
عناصر: {
زر: {
نمط الحاوية: {
الهامش: 10 ،
},
العنوانالنمط: {
لون: "أسود",
},
},
},
});
ال ThemeProvider سيطبق أنماطًا على أي مكون ملفوف بداخله.
يقبل المزود أ سمة prop الذي تم تعيينه على السمة التي تم إنشاؤها أعلاه:
<ThemeProvider theme = {theme}>
<عنوان الزر ="زر تحت عنوان" />
</ThemeProvider>
<عنوان الزر ="زر عادي" />
تتجاوز أنماط النسق أنماط المكونات الداخلية أو الافتراضية ولكنها لن تتجاوز نمط المكون الخارجي.
ترتيب أسبقية RNE يضع الأنماط الخارجية في أعلى التسلسل الهرمي.
مثال:
// سمة
مقدار ثابت الموضوع = createTheme ({
عناصر: {
زر: {
نمط الحاوية: {
الهامش: 10 ،
لون الخلفية: "أحمر",
},
},
},
});
//Component
<ThemeProvider theme = {theme}>
<عنوان الزر ="زر تحت عنوان" اللون = {"ثانوي"}/>
</ThemeProvider>
في الكود أعلاه ، لون خلفية ملف زر سيكون المكون ثانويًا ، وهو اللون الأخضر على عكس نمط السمة الأحمر.
أ سمة يتم شحن الكائن مع RNE ، مما يوفر العديد من قيم الألوان الافتراضية خارج الصندوق. يوفر RNE خيارات متنوعة مثل موضوع المستهلك عنصر، useTheme () ربط و نمط () مولد الخطاف للوصول إلى سمة هدف.
ال موضوع المستهلك المكون سوف يلتف المكونات الخاصة بك مع تقديم وظيفة مجهولة. تأخذ هذه الوظيفة المجهولة سمة كدعم.
يمكنك الوصول إلى قيم النسق بامتداد أسلوب دعم:
يستورد تتفاعل من 'تتفاعل'؛
يستورد { زر } من "رد فعل أصلي" ؛
يستورد {ThemeConsumer} من "@ rneui / تحت عنوان" ؛
مقدار ثابت MyComponent = () => (
<موضوع المستهلك>
{({موضوع}) => (
<عنوان الزر ="موضوع المستهلك" النمط = {{color: theme.colors.primary}} />
)}
</ThemeConsumer>
)
بدلاً من ذلك ، يمكنك استخدام ملف useTheme () ربط للوصول إلى السمة داخل مكون.
على سبيل المثال:
يستورد تتفاعل من 'تتفاعل'؛
يستورد { زر } من "رد فعل أصلي" ؛
يستورد {useTheme} من "@ rneui / تحت عنوان" ؛مقدار ثابت MyComponent = () => {
مقدار ثابت {theme} = useTheme () ،
يعود (
<عرض النمط = {styles.container}>
<عنوان الزر ="useTheme" النمط = {{color: theme.colors.primary}} />
</View>
);
};
ال نمط () مولد الخطاف مشابه لاستخدام ورقة أنماط لتحديد الأنماط. مثل ورقة الأنماط ، فإنها تفصل أي نمط عن المكون الخارجي الخاص بك. الرجوع إلى سمة كائن داخل دعامة نمط المكونات.
توسيع السمات باستخدام TypeScript
يدعم RNE إعلانات TypeScript في تطبيقك ، مما يسمح للمطورين بالاستفادة من فوائد استخدام لغة TypeScript.
مع TypeScripts إعلان دمج، يمكنك توسيع تعريفات السمات لإضافة ألوان ودعائم مخصصة لكل من مكونات RNE الافتراضية والمخصصة.
لتوسيع الألوان داخل كائن النسق ، ستقوم بإنشاء ملف TypeScript.ts ملف وتعلن الوحدة @ rneui / تحت عنوان داخل الملف.
يمكنك بعد ذلك المضي قدمًا لإضافة ألوانك المخصصة وتحديد نوعها المتوقع:
// ** TypeScript.ts **يستورد 'تضمين التغريدة/themed';
يعلن وحدة 'تضمين التغريدة/ تحت عنوان "{
يصدّر واجهه المستخدمالألوان{
PrimaryLight: خيط ؛
ثانوي: خيط ؛
}
}
باستخدام هذه الوحدة ، يمكنك تمرير الألوان المخصصة كقيم عند إنشاء سمة:
مقدار ثابت الموضوع = createTheme ({
الألوان: {
الضوء الأساسي: "",
ثانوي: ""
},
})
أصبحت الألوان المخصصة الآن جزءًا من كائن المظهر الخاص بك ويمكن الوصول إليها باستخدام ThemeProvider ، ThemeConsumer ، أو ال useTheme () خطاف.
مكونات RNE مقابل. تفاعل المكونات الأصلية
تعد مكتبات المكونات مثل React Native Elements طريقة رائعة لتنشيط التطبيق وتشغيله بسرعة. يحافظون على تركيزك على بنية التطبيق بدلاً من تفاصيل التصميم. يجب أن يتم توجيه استخدام مكونات RNE على مكونات React Native بشكل أساسي من خلال تركيز تطبيقك ومقدار وقت التطوير لديك.