استفاده از فونت دلخواه در React Native

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

موقع توسعه یه اپلیکیشن نیاز به فونت دلخواه و استفاده نکردن از فونت‌های سیستم عامل یکی از نیازهای طبیعی هستش و اینکار در React Native هم ممکنه. این روش برای هر ۲ سیستم عامل Android و iOS قابل استفاده‌ست و محدودیتی وجود نداره.

اولین نکته در استفاده از فونت دلخواه دانستن نام فونت هستش. نام فونت با نام فایل فرق می‌کنه و پیشنهاد می‌شه نام فایل‌ها را به Full name فونت تغییر بدین.

قراردادن فونت‌ها در پروژه

در قدم بعد باید فونت‌ها در فولدری از پروژه کپی کنید تا بتوانید به آن‌ها دسترسی داشته باشید. من فونت‌ها را در آدرس 'app/assets/fonts' قرار دادم اما شما می‌توانید ساختار فولدربندی پروژه‌ی خود را دنبال کنید.

پس از کپی فونت‌ها باید به React Native بگویید که فونت‌ها از کجا لود کند. برای اینکار باید فایل Package.json را ویرایش کرده و مسیر فونت‌ها را با کد زیر به آن اضافه کنیم:

"rnpm": {
    "assets": [
        "./app/assets/fonts/"   
     ]
},

سپس باید به React Native بگوییم که فایل‌ها را از این مسیر لود کند:

react-native link

پس از اجرای این دستور فایل‌ها به فولدرهای iOS و Android کپی خواهند شد تا برای هر سیستم عامل به طور جداگانه لود شوند. حالا فونت‌ها قابل استفاده هستند.

استفاده از فونت‌ها

برای استفاده از فونت‌ها می‌توانید از React Native styles استفاده کنید. کافی‌ست از پراپرتی‌های fontFamily و fontWeight استفاده کنید تا فونت‌ها برای المان‌های مدنظرتان اعمال شود:

const styles = StyleSheet.create({
 title: {
   fontFamily: "Vazir",
   fontWeight: 'bold',
   fontSize: 30,
   textAlign: "center",
   marginTop: 40,
   color: '#e41642'
  },
});

امیدوارم آموزش مفیدی بوده باشه و اپلیکیشن‌هاتون با فونت‌های قشنگ فارسی قشنگ‌تر بشه :)

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