ساخت کامپوننت های کاربردی React Native بخش اول – ساخت کامپوننت Text

سلام به شما همراهان ایزی بیلد.

همیشه این نکته رو به یاد داریم که توی پروژه هامون از کد های تکراری استفاده نکنیم. توی پروژه های ری اکت نیتیو هم به تعداد دفعات بسیار زیادی کامپونت های اصلی مثل Text , Button , … استفاده میکنیم.

آخر این مقاله با هم ساخت یه Text Component رو مرور میکنیم که با یکبار کد نویسی توی همه پروژه هامون میتونیم استفاده اش کنیم.

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

یکی از اولین مواردی که توی متن های فارسی توجه کاربر رو به خودش جلب میکنه فونت استفاده شده برای متن های بکار برده شده است.برای اینکه فونت دلخواهمون رو به پروژه اضافه کنیم ابتدا فونت های مد نظرمون رو به پروژه اضافه میکنیم.

سپس توی مسیر روت پروژه یک فایل به اسم react-native.config با پسوند js اضافه میکنیم .

کد هایی که قراره داخل این فایل قرار بگیرن :

module.exports = {
    project: {
        ios: {},
        android: {},
    },
    assets: ['./src/assets/fonts'],
};

در اینجا فونت های ما داخل مسیر ./src/assets/fonts قرار دارند. شما میتونید مسیر دلخواهی که فونت هاتون رو کپی کردید بهش بدید.

بعد از انجام این کار دستور react-native link رو داخل ترمینال پروژه اجرا میکنیم تا فونت های ما به پروژه لینک بشن.

ما قصد داریم که از proptypes برای ساخت کامپوننت بهره بگیریم پس قدم بعدی نصب proptype هست.

با این دستور کار مد نظرمون رو انجام میدیم

npm install --save prop-types

یه نکته ای که توی طراحی اجزای پروژه مون خیلی مهمه طراحی اپلیکیشن بصورتی که روی تمامی دستگاه با روزولوشن های مختلف یکسان باشه یا به اصطلاح  responsive باشه. فونت ها هم جزوی از طرح هستن که باید به شکل واکنش پذیر طراحی بشن که روی دستگاه های مختلف به درستی نمایش داده بشن.

برای اینکه ما بهترین نتیجه رو برای کارمون ببینیم از پکیج فوق العاده ای به اسم react-native-responsive-screen استفاده میکنیم

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

برای نصب هم میتونید دستور زیر رو در ترمینال پروژه تایپ کنید :

npm install react-native-responsive-screen --save

حالا نوبت به ساخت کامپوننت Text میرسه . ما یک فایل با اسم MainText.js ساختیم که کد هامون رو داخل این کامپوننت مینویسیم.

ابتدا مواردی که نیاز داریم رو ایمپورت میکنیم:

import React from 'react'
import {Text as MainText} from 'react-native'
import PropTypes from 'prop-types'
import {heightPercentageToDP as hp} from 'react-native-responsive-screen'

ما قصد داریم که کامپوننتمون رو با hook کد نویسی کنیم پس کد زیر رو پس از موارد بالا لحاظ میکنیم :

const MainText = () => {
return(


)
}
exprot default MainText

در قدم بعدی نیاز هایی که داریم برای استفاده از پراپس های کامپوننتمون رو لحاظ کنیم . نکاتی که معمولا مهم هستند سایز ، رنگ و قرار گیری متن در سمت چپ راست یا مرکز یا به اصطلاح textAlign هست پس نحوه کد نویسی ما برای اعمال پراپس هامون به این شکل میشه و مرحله ی نهایی ساخت کامپوننت مون هست:

const Text = ({
                  props,
                  children,
                  style = {},
                  fontSize = wp('3.7%'),
                  h2 = false,
                  h3 = false,
                  h4 = false,
                  h5 = false,
                  h6 = false,
                  color = '#fff',
                  textAlign,
                  left = false,
                  center = false,
                  right = false,
                  bold = false,
                  light = false,
                  medium = true,

              }) => {
    let propTypes = {
        style: PropTypes.object,
        h2: PropTypes.bool,
        fontSize: PropTypes.number,
        h3: PropTypes.bool,
        h4: PropTypes.bool,
        h5: PropTypes.bool,
        h6: PropTypes.bool,
        color: PropTypes.string,
        textAlignment: PropTypes.string,
        left: PropTypes.bool,
        center: PropTypes.bool,
        right: PropTypes.bool,
        bold: PropTypes.bool,
        light: PropTypes.bool,
        fontFamily: PropTypes.string,
        medium: PropTypes.bool,
    };
    if (h2) {
        fontSize = hp('4.8%'); //fontSize:18
    }
    if (h3) {
        fontSize = hp('4.3%'); //fontSize:16
    }
    if (h4) {
        fontSize = hp('3.7%'); //fontSize:14
    }
    if (h5) {
        fontSize = hp('3.2%'); //fontSize:12
    }
    if (h6) {
        fontSize = hp('2.7%'); //fontSize:10
    }
    if (left) {
        textAlign = 'left';
    }
    if (center) {
        textAlign = 'center';
    }
    if (right) {
        textAlign = 'right';
    }
    return (
        
            {children}
        
    );
};
export default Text;

ما آرگومان هایی که نیاز داریم رو توی ورودی تابع مون تعریف کردیم و مقدار اولیه اشون رو هم اعمال کردیم.

props , children , style , …. مواردی که بیشتر مورد نیاز ما هست رو بشکل پراپس به کامپوننتمون اعمال کردیم

*نکته : اندازه فونت ها برای نمونه هست و شما براحتی میتونید اندازه مورد نظرتون رو بدست بیارید 🙂

امیدواریم که استفاده کافی رو از این مطلب برده باشید.