بیاین بهتر React Native بنویسیم (قسمت اول)

سلام

یه چند وقتی بود میخواستم یسری پست درباره React Native بنویسم و یسری از کدها، دستورات و کامپوننت ها (ک خودم حس میکنم کد هام بهینه تر و باحال تر میکنه برام) رو به اشتراک بزارم، قضیه ای که هست اینه که تو این پست ها قرار نیست شاهکار کنیم و سطح پست ها مبتدی-متوسط حساب میشه، در اصل برای اون دسته از بچه هایی که تازه React Native رو شروع کردن و دارن اندکی اشتباه میزنن، کد منظورمه!

پس اگر سطح کدنویسی خودتون رو بالا میدونید خوندن این پست و مطلب توصیه نمیشه، نگین این چیا بود که نوشتی ;)

استفاده از فونت اختصاصی

نه نه اشتباه نکنید! من قرار نیست بیام بگم چطور قراره فونت اختصاصی خودمونو به برنامه اضافه کنیم! من فقط میخام بگم بعد از اضافه کردن چطور اونو در Text هامون به شکل درست (ترش) اضافه کنیم

اول باید فونت اختصاصی خودتون رو اضافه کنید که برای اینکار میتونید این پست یا ترجمه اون و یا این یکی رو بخونید

فرض کنید من دارم از فونت IranSans استفاده میکنم (من عاشق این فونتم و اکثر برنامه هامم با همین می نویسم، البته اگر UI دست خودم باشه ک نیست! )

در جریان باشید که اسم فایل های ttf فونت هایی که من دارم استفاده میکنم IRANSansMobile(NoEn)_Bold.ttf و IRANSansMobile(NoEn).ttf هست

پس می نویسیم :

import React from 'react'
import { Text , StyleSheet } from 'react-native'
...
return ( 
            <Text style={styles.text}>یک متن فونت دار</Text>
           )

...
const styles =  StyleSheet.create({
    text:{
        fontFamily: 'IRANSansMobile(NoEn)_Bold // بولد
        fontFamily:'IRANSansMobile(NoEn)', // معمولی
    }
});

کد ساده اس! اینطور نیست؟( اگر متوجه این کد نمیشین خیلی زوده خوندن این مقاله برید بیشتر کار کنین و زود برگردین!)

من دیگه از تعریف class و نوشتن render() و اینا پرهیز میکنم که کدهای اصلی بیشتر تو چشم باشن

خب پس اینجا دردسری نداشتیم و همون اسم فایل های ttf رو استفاده میکنیم اما این فقط روی اندروید کار میکنه و اگر جایی از فونت Bold استفاده کنیم در ios دچار مشکل میشیم، پس برای حالت بولد ios میایم و کد رو به این صورت میکنیم

import React from 'react'
import { Text , StyleSheet , Platform } from 'react-native'

...

return <Text style={styles.text}>یک متن فونت دار</Text> 

...

const styles =  StyleSheet.create({
    text:{
      ...Platform.select({
        android : {
            fontFamily: 'IRANSansMobile(NoEn)_Bold'
          },
          ios:{
           fontFamily:'IRANSansMobile(NoEn)',
           fontWeight:'bold'
           }
      })
     }
 });

خب اینم حل شد و حالا کد ما در ios هم براحتی کار میکنه اما تا اینجا خیلی موضوع خاصی که نگفتم! اینارو با چارتا آزمون و خطا میتونستید در بیارید، موضوع اینه که به احتمال زیاد میاین و در اکثر جاهای اپ کد رو برای فونت اینطور می نویسین!

یعنی به احتمال زیاد برای هر سری که میخاین یه Text رو بهش فونت بدین می نویسین

fontFamily: 'IRANSansMobile(NoEn)_Bold'

خب این کار به ذات خودش غلط نیست ولی اگر پروژه که دارین می نویسین کمی بزرگ بشه بعدا اگر خواستین فونت برنامه رو عوض کنین دردسرش جدیه! دونه دونه فایل های js خودتون رو باید سرچ کنید و مثلا فونت رو به Vazir تغیر بدین! عذابه بچه ها! عذااااب

من 3 تا راهکار بهتون پیشنهاد میدم، البته اصلش مورد آخره ولی دو راهکار اول رو میگم که مرحله مرحله بریم جلو! مقاله خودمه میخام کشش بدم

نگهداری نام فونت در متغیر

متوجه منظورم شدین؟ نه؟ توضیح میدم، خیلی ساده اس، میایم ی فایل js در پروژه درست میکنیم و اسمشو میزاریم مثلا Data.js و اسم فونت رو ذخیره میکنیم

export const FontName = 'IRANSansMobile(NoEn)' 
export const BoldFontName = 'IRANSansMobile(NoEn)_Bold' 

حله؟ ما 2 تا متغیر نوشتیم که اسم فونت هارو داشته باشیم، اون export هم برای اینکه بتونیم در بقیه فایل های js اینارو import کنیم.

حالا مثال بالا رو اینطور می نویسیم

import React from 'react'
import { Text , StyleSheet , Platform } from 'react-native'
import { FontName , BoldFontName  } from './Data.js'

...

return <Text style={styles.text}>یک متن فونت دار</Text>

...

const styles =  StyleSheet.create({
   text:{
     ...Platform.select({
         android : {
           fontFamily: BoldFontName
          },
          ios:{
            fontFamily:FontName,
            fontWeight:'bold'
          }
     })
   }
 });

پس حالا ما هروقت خواستیم از فونت معمولی استفاده کنیم FontName و هروقت خواستیم Bold باشه به شیوه بالا :)

کدمون بهتر شد ولی بازم خوشم نیومد؟ چرا؟! چون برای بولد کردن هر سری باید بیایم و این دستورات رو برای Text بنویسیم، بنظرتون کد هامون الکی زیاد نمیشن؟ من بهش میگم تکرار نویسی، ما برنامه نویسیم (خیر سرمون) و باید تا جای ممکن کدهامون خواناتر، تمیز تر و کوتاه تر باشن! البته بنظر من...

پس برای رفع مشکل تکرار نویسی میریم سراغ دستور العمل شماره دو

استایل در متغیر! نه فقط اسمش

شاید کمی گنگ بنظر بیاد این اسمی که نوشتم، ولی اسم بهتری به ذهنم نمیخوره در حال حاضر، بیاین اون فایل Data.js رو به شکل زیر تغیر بدیم تا توضیح بدم

import React from 'react'
import {  Platform } from 'react-native'

export const Font = {
 fontFamily:'IRANSansMobile(NoEn)'
}

export const BoldFont = Platform.select({
 android : {
 fontFamily: 'IRANSansMobile(NoEn)_Bold'
    },
 ios:{
 fontFamily:'IRANSansMobile(NoEn)',
 fontWeight:'bold'
    }
});

خب پس الان ما اون دستورات استایل دهی رو در متغیر ریختیم، حالا مثال رو هم بروزرسانی میکنم

import React from 'react'
import { Text , StyleSheet , Platform } from 'react-native'
import { BoldFont  } from './Data.js'
 
 ...

return <Text style={styles.text}>یک متن فونت دار</Text> )
...

const styles =  StyleSheet.create({
       text:{
       ...BoldFont
       
});

به به، کم کم داره خوشم میاد ازش :) حالا ما خیلی ساده هرکجا بخایم فونت بولد باشه میایم و BoldFont رو import میکنیم و بدین سان استفاده میکنیم، فونت معمولی هم همین حالته ها! کافیه Font رو ایمپورت کرده و کیفشو ببرین :)

اما بازم هنوز حس میکنم یچیز اضافه اس این وسط! دارم به این فکر میکنم ما که میدونیم قراره همه اپمون با همین فونت قراره نوشته بشه، پس چرا نیایم و یدونه Component برای Text خودمون ننویسیم؟ اینطور لازم نیست هی فونت رو Import کنیم و این داستانا!

میرسیم مرحله سه!

کامپوننت MyText

ی فایل درست کنین به اسم MyText.js با این محتویات

import React, { Component } from 'react';
import { Text , StyleSheet } from 'react-native';
import { Font , FontBold} from './Data';

class MyText extends Component {
 render() {
 return (
 <Text style={[styles.text,this.props.bold ? {...FontBold} : null,this.props.style]}>
 {this.props.children}
 </Text>
        );
    }
}

const styles = StyleSheet.create({
 text: {
 ...IranSans,
  },
});

export default MyText;

اوکیه؟ با اینکه میدونم گرفتین چی شد ولی یه توضیح کوچیک میدم، اون بالا برای استایل Text اینطوری نوشتم

<Text style={[styles.text,this.props.bold ? {...BoldFont} : null,this.props.style]}>

چرا؟ ساده اس، یدونه prop گذاشتم که اگر کاربر خواست فونت بولد باشه بنویسه bold و اینجا چک کردم اگر کاربر اون bold رو نوشت فونت بولد رو استفاه کن، اگرم کاربر style وارد کرد روی Text اعمال بشه(textAlign ، margin،pading و یا هرچیز اختصاصی دیگری...)

اون children هم میاد محتویاتی(child ها) که بین کامپوننت نوشته میشه رو میزاره برامون اون وسط!

حالا برای استفاده توی همون مثال اینطور می نویسم

import React from 'react'
import MyText from './MyText'
...
return <MyText bold>یک متن فونت دار</MyText>

خودمونیم ولی کیف نکردین؟ اگر خواستین میتونین بازم باحالترش کنین و از static property ها استفاده کرده و فیض ببرید که کدتون بدین شکل بشه

<MyText.Bold>یک متن فونت دار</MyText.Bold>
<MyText.Normal>یک متن فونت دار</MyText.Normal>

و یا اینکه از stateless component استفاده کنین که کدهای MyText.js کوتاه تر بشه که نوشتنش کمی سرچ کردن شمارو میطلبه و مقاله برای نوشتنشون توی همین ویرگول هست و دوباره گویی میشه :)

خب خسته نباشید، امیدوارم این مقاله بدردتون بخوره و الکی وقتتونو نگرفته باشم ;) بدرود

آپدیت: اسم اول این مقاله "تجربه و تکنیک های React Native برای تازه کاران (قسمت اول)" ولی دیدم مناسب نیست و بهتره اسمش عوض بشه، برای همین آدرسش کمی فرق داره