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

سلام به دوستان و همراهان عزیز.

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

در جلسه ی گذشته با آموزش ساخت کامپوننت Text بصورت شخصی سازی شده در خدمتتون بودیم و اینبار در ادامه سری ساخت این کامپوننت ها و با آموزش ساخت دکمه در خدمت شما هستیم.

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

اگر بخش اول این سری از آموزش ها رو مطالعه نکردید توصیه میشه که حتما از طریق این لینک  مقاله مربوط به ساخت کامپوننت متنمون رو مطالعه کنید چون قراره از کتابخونه هایی که در ساخت متنمون استفاده کردیم رو اینجا هم بکار ببریم 🙂 کتابخونه هایی مثل :responsive screen – proptypes و …

نکته ای که وجود داره اینه که ما برای انتخاب رنگ هامون میتونیم اونها رو به این شکل کد نویسی کنیم :

const colors = {
    primaryColor : '#000',
    primaryLightColor: '#000',
    primaryDarkColor: '#000',

    secondaryColor : '#efefef',
    secondaryLightColor : '#efefef',
    secondaryDarkColor : '#efefef',
    blackColor : '#000',
    whiteColor : '#fff',
 ....
};

export default colors;

ما میتونیم توی مسیر روت پروژه امون یک دایرکتوری به اسم کانفیگ بسازیم و این کد ها رو داخل فایل colors.js یا هر اسم دلخواهی قرار بدیم . مزیت استفاده از این کد اینه که شما لازم نیست هر بار که خواستید از رنگ پایه ای که طراح برای پروژه اتون استفاده کرده کد رنگ رو مستقیم استفاده کنید و کد رنگهای مختلفی رو با نام های مرتبط تعریف کنید.

حالا میریم سراغ کد نویسیِ Button Component :

قدم اول فراخوانی React از کتابخونه react و همچنین برای دکمه ما از pressable که کامپوننت جدید react هست و از کتابخونه ی خود ری اکت نیتیو ایمپورت میشه استفاده میکنیم.برای متن دکمه ها هم از کامپوننت Text که خودمون ساختیم استفاده میکنیم. proptypes هم که توی آموزش قبلی استفاده شد رو فراخوانی میکنیم.سپس کامپوننتمون رو میسازیم، به شکل زیر:

import React from 'react';
import {Pressable} from 'react-native';
import PropTypes from 'prop-types';
import Text from '../Text';


const MainButton = () => {
return(
 <Pressable}
                          >
           <Text>دکمه اصلی</Text>
        </Pressable>
)
}

export default MainButton;

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

import React from 'react';
import {Pressable , StyleSheet} from 'react-native';
import PropTypes from 'prop-types';
import {widthPercentageToDP as wp , heightPercentageToDP as hp} from 'react-native-responsive-screen';
import colors from './config/color' ;

import Text from './Text';


const MainButton = ({style, textStyle, primary,transparent,secondary, block, disabled, primaryFull, buttonColor, small,onPress = () =>{}, loading, children}) => {
    let propTypes = {
        style: PropTypes.object,
        textStyle: PropTypes.object,
        primaryFull: PropTypes.bool, 
        primary: PropTypes.bool,
        secondary: PropTypes.bool,
        block: PropTypes.bool,
        buttonColor: PropTypes.string,
        small: PropTypes.bool,
        disabled: PropTypes.bool,
        onPress: PropTypes.func,
        transparent :PropTypes.bool,
    };

    if (primary) {
        style = {
            backgroundColor: colors.secondaryColor,
        };
        textStyle = {
            color: colors.whiteColor,
        };
    }
    if (secondary) {
        style = {
            backgroundColor: colors.primaryColor,
            // borderWidth: .8,
            // borderColor: colors.secondaryColor
        };
        textStyle = {
            color: colors.white,
        };
    }
    if (block) {
        style = {
            backgroundColor: colors.lightishgray,
        };
        textStyle = {
            color: colors.black,
        };
    }
    if (transparent) {
        style = {
            width : wp(40),
            backgroundColor: colors.transparent,
            borderWidth: 1,
            borderColor : colors.lightgray
        };
        textStyle = {
            color : colors.textColor,
        };
    }
    if (small) {
        style = {
            backgroundColor: buttonColor,
            width: wp('42%'),
        };
        textStyle = {
            color: colors.whiteColor,
        };
  
        textStyle = {
            color: colors.whiteColor,
        };
    }
    if (primaryFull) {
        style = {
            backgroundColor: colors.secondaryColor,
            width: wp('100%'),
            borderRadius : 0
        };
        textStyle = {
            color: colors.primaryColor,
        };
    }
    if (disabled === true) {
        style = {
            backgroundColor: colors.gray,
            //width: wp('85%'),
        };
        textStyle = {
            color: colors.darkgray,
        };
    }
  
    const _buttonTextOrSpinner = (textStyle) => {
        if (loading) {
            return (<Spinner color={colors.whiteColor} style={buttonStyle.spinner}/>);
        } else {
            return (<Text style={textStyle} h4>{children}</Text>);
        }
    };

    return (
        <Pressable disabled={disabled} style={[buttonStyle.button, style, buttonColor]}
                          onPress={onPress}>
            {_buttonTextOrSpinner(textStyle)}
        </Pressable >
    );
};

export default MainButton;

const buttonStyle = StyleSheet.create({
    spinner : {
        margin: 0,
        padding: 0,
        height: hp(5.8),
    },
    {
    button: {
        width: wp(75),
        alignItems: 'center',
        justifyContent: 'center',
        padding: 5,
        borderRadius: 5,
        borderWidth : 0
    },
});

پس از انجام تغییرات کد ما بشکل بالا تغییر میکنه و حالا ما میتونیم از دکمه ای که ساختیم نهایت استفاده رو ببریم 🙂

اما نکاتی که شاید جای سوال باشه :

props مورد استفاده ای که disable نامگذاری کردیم همونطور که از اسمش پیداست برای زمانی استفاده میشه که ما قصد داریم وضعیت دکمه رو به غیر فعال تغییر بدیم که در اونصورت لازمه که استایل دکمه ما تغییر کنه.

نکته ی دیگه که شاید جای سوال باشه به متد _buttonTextOrSpinner برمیگرده که این موضوع به نکته ای که بالاتر بهش اشاره کردیم برمیگرده. برای مثال زمانی که صفحه ورود کاربر به برنامه رو طراحی میکنید برای احراز هویت کاربر از سمت سرور به چند ثانیه زمان نیاز داریم. برای نمایش منتظر موندن کاربر میتونیم متن روی دکمه رو به یک spinner تغییر بدیم که متد مورد استفاده ما اینکار رو برامون انجام میده. پارامتر وروردی که ما textStyle نامگذاری کردیم هم برای بررسی استایل متنمون در زمانی هستش که قصد داریم از دیگر پراپس ها مثل primary یا disable استفاده کنیم که در این صورت نیازه که رنگ متنمون هم بسته به رنگ پس زمینه دکمه امون تغییر کنه.

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

هر گونه سوال ، نظر ، انتقاد و پیشنهاداتون رو با ما در میون بگذارید 🙂