نحوه استفاده از React Native Elements Component Library در اپلیکیشن موبایل

اگر در حال توسعه برنامه های تلفن همراه هستید، باید کتابخانه مؤلفه React Native Elements را بدانید.

کتابخانه های مؤلفه مجموعه ای از کدهای قابل تنظیم و استفاده مجدد هستند که می توانند متناسب با الگوی طراحی یک برنامه خاص ساخته شوند. آنها به حفظ طراحی ثابت در سراسر پلتفرم ها و سرعت بخشیدن به روند توسعه کمک می کنند.

در اینجا نحوه استفاده از کتابخانه مؤلفه React Native Elements را در هنگام ساخت برنامه React Native بعدی خود خواهید آموخت.

React Native Elements چیست؟

React Native Elements (RNE) یک تلاش منبع باز توسط توسعه دهندگان React Native برای ایجاد یک کتابخانه مؤلفه است که می تواند هنگام ساخت برنامه های اندروید، iOS و وب مفید باشد. برخلاف بسیاری دیگر از کتابخانه های مؤلفه React Native، RNE از نحو TypeScript پشتیبانی می کند.

این کتابخانه از بیش از ۳۰ جزء تشکیل شده است که بر ساختار اجزا تمرکز دارد.

نصب React Native Elements با React Native CLI

دستورالعمل های زیر برای نصب React Native Elements در پروژه ای است که با استفاده از React Native cli ایجاد شده است.

با اجرای:

npm install @rneui/themed @rneui/base 

همچنین باید react-native-vector-icons و safe-area-context را نصب کنید:

npm install react-native-vector-icons react-native-safe-area-context

نحوه نصب React Native Elements در یک پروژه اکسپو

برای نصب React Native Elements در یک پروژه Expo موجود، بسته و react-native-safe-area-context را نصب کنید:

yarn add @rneui/themed @rneui/base react-native-safe-area-context

در حین نصب بسته ها، یک مدیر بسته مانند npm یا yarn را حفظ کنید تا از خطر درگیری وابستگی جلوگیری کنید.

پروژه هایی که با استفاده از expo cli ساخته می شوند دارای نمادهای react-native-vector به طور پیش فرض نصب شده اند، بنابراین نیازی به نصب آن ندارید.

Styling Single React Native Elements Components

تمام اجزای موجود از طریق RNE از لوازم مختلف برای استایل دادن به کامپوننت و ظرف کامپوننت استفاده می کنند.

محفظه کامپوننت یک تگ اساسی است که دور یک تگ جزء پیچیده شده است، مانند . تگ در اطراف کامپوننت شکست ناپذیر است و برای اعمال سبک های view از یک prop containerStyle استفاده می کند.

یک مؤلفه می‌تواند لوازم یک ظاهر طراحی پیش‌فرض مانند رنگ، نوع و اندازه را دریافت کند. یک کامپوننت همچنین می تواند یک پایه سبک سفارشی منحصر به فرد برای مدیریت استایل های کامپوننت دریافت کند.

اینها همه سبک های خارجی برای کامپوننت هستند.

به عنوان مثال، سبک دادن به مؤلفه Button:

import { View } from "react-native";
import { Button } from "@rneui/themed";
 
const MyComponent = () => {
  return (
    <View>
      <Button
        buttonStyle={{ backgroundColor: "grey" }}
        containerStyle={{ width: 150 }}
      >
        Solid Button
      </Button>
      <Button
        type="outline"
        containerStyle={{ width: 150, margin: 10 }}
        title="Outline Button"
      />
    </View>
  );
}

کد بالا نشان می‌دهد که چگونه می‌توانید استایل‌ها را روی یک جزء Button اعمال کنید. یکی از دکمه‌ها از نوع پیش‌فرض prop استفاده می‌کند و دیگری از دکمه سفارشی Style prop استفاده می‌کند. هر دو دکمه همچنین از prop containerStyle برای افزودن استایل های نمایش استفاده می کنند.

ایجاد تم برای اجزای React Native Elements

ایجاد تم برای اجزای RNE زمانی مفید است که بخواهید یک سبک را برای هر نمونه از آن مؤلفه ها اعمال کنید. با تم ها، سفارشی کردن اجزای خود برای مطابقت با الگوی طراحی مورد نظر به یک کار آسان تبدیل می شود.

RNE یک تابع ()createTheme برای استایل دادن به کامپوننت ها ارائه می کند. این تابع سبک‌های تم را نگه می‌دارد که سبک‌های داخلی یا پیش‌فرض هر مؤلفه را لغو می‌کند.

برای ایجاد یک تم، createTheme() را فراخوانی کنید و استایل های تم مورد نظر را به عنوان آرگومان تابع ارسال کنید:

import { ThemeProvider, createTheme } from '@rneui/themed';
 
const theme = createTheme({
    components: {
      Button: {
        containerStyle: {
          margin: 10,
        },
        titleStyle: {
          color: "black",
        },
      },
    },
});

ThemeProvider سبک ها را برای هر جزء پیچیده شده در آن اعمال می کند.

ارائه‌دهنده یک طرح زمینه را می‌پذیرد که روی تم ایجاد شده در بالا تنظیم شده است:

<ThemeProvider theme={theme}>
    <Button title="Themed Button" />
</ThemeProvider>
<Button title="Normal Button" />

سبک‌های تم سبک‌های مؤلفه داخلی یا پیش‌فرض را نادیده می‌گیرند، اما سبک مؤلفه خارجی را لغو نمی‌کنند.

ترتیب اولویت RNE استایل های خارجی را در بالای سلسله مراتب قرار می دهد.

مثال:

// Theme
const theme = createTheme({
    components: {
      Button: {
        containerStyle: {
          margin: 10,
          backgroundColor: "red",
        },
      },
    },
});
 
//Component
<ThemeProvider theme={theme}>
    <Button title="Themed Button" color={"secondary"}/>
</ThemeProvider>

در کد بالا، رنگ پس‌زمینه کامپوننت Button ثانویه خواهد بود که بر خلاف سبک تم قرمز، رنگ سبز است.

یک موضوع با RNE ارسال می‌شود و مقادیر رنگی پیش‌فرض متعددی را از جعبه ارائه می‌دهد. RNE گزینه های مختلفی مانند کامپوننت ThemeConsumer، قلاب useTheme() و تولید کننده قلاب makeStyles() را برای دسترسی به شی تم ارائه می دهد.

مؤلفه ThemeConsumer اجزای ارائه شده شما را با یک تابع ناشناس می‌پیچد. این تابع ناشناس تم را به عنوان یک پایه می گیرد.

می‌توانید با یک استایل به مقادیر تم دسترسی پیدا کنید:

import React from 'react';
import { Button } from 'react-native';
import { ThemeConsumer } from '@rneui/themed';
 
const MyComponent = () => (
  <ThemeConsumer>
    {({ theme }) => (
      <Button title="ThemeConsumer" style={{ color: theme.colors.primary }} />
    )}
  </ThemeConsumer>
)

همچنین، می‌توانید از قلاب useTheme() برای دسترسی به تم داخل کامپوننت استفاده کنید.

مثلا:

import React from 'react';
import { Button } from 'react-native';
import { useTheme } from '@rneui/themed';
 
const MyComponent = () => {
  const { theme } = useTheme();
 
  return (
    <View style={styles.container}>
      <Button title="useTheme" style={{ color: theme.colors.primary }}/>
    </View>
  );
};

مولد قلاب makeStyles() شبیه استفاده از شیوه نامه برای تعریف استایل است. مانند شیوه نامه، هر استایلی را از اجزای رندر شده شما جدا می کند. ارجاع به شی موضوع در داخل یک پایه سبک اجزا.

گسترش تم ها با TypeScript

RNE از اعلان‌های TypeScript در برنامه شما پشتیبانی می‌کند و به توسعه‌دهندگان اجازه می‌دهد از مزایای استفاده از زبان TypeScript استفاده کنند.

با ادغام اعلان‌های TypeScript، می‌توانید تعاریف تم را برای اضافه کردن رنگ‌ها و لوازم سفارشی برای اجزای پیش‌فرض و سفارشی RNA گسترش دهید.

برای گسترش رنگ ها در داخل شی تم، یک فایل TypeScript.ts جداگانه ایجاد می کنید و ماژول @rneui/themed را در داخل فایل اعلام می کنید.

سپس می توانید رنگ های سفارشی خود را اضافه کنید و نوع مورد انتظار آنها را مشخص کنید:

// **TypeScript.ts**
 
import '@rneui/themed';
 
declare module '@rneui/themed' {
  export interface Colors {
    primaryLight: string;
    secondaryLight: string; 
  }
}

با استفاده از این ماژول، می توانید هنگام ایجاد یک موضوع، رنگ های سفارشی خود را به عنوان مقادیر ارسال کنید:

const theme = createTheme({
  colors: {
    primaryLight: "",
 secondaryLight: ""
  },
})

اکنون رنگ های سفارشی بخشی از موضوع تم شما هستند و با استفاده از ThemeProvider، ThemeConsumer یا قلاب useTheme() می توان به آنها دسترسی داشت.

RNE Components در مقابل React Native Components

کتابخانه‌های مؤلفه‌ای مانند React Native Elements یک راه عالی برای راه‌اندازی و اجرای سریع یک برنامه هستند. آنها تمرکز شما را بر روی ساختار برنامه به جای روی جزئیات طراحی حفظ می کنند. استفاده از کامپوننت‌های RNE بر روی کامپوننت‌های React Native باید در درجه اول بر اساس تمرکز برنامه شما و مدت زمان توسعه شما هدایت شود.

منبع مقاله