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

سلام
برای اینکه از کاستوم فونت ها در پروژه های ری‌اکت نیتیو استفاده کنین راه طولانی ای رو نباید برین و به راحتی روی اندروید و IOS میتونین خروجی بگیرین. :)

مرحله ۱: اضافه کردن فونت ها به Asset ها

فونت هایی رو که میخواین به پروژتون اضافه کنین توی پوشه “assets/fonts” توی پوشه روت پروژتون بریزین:

مرحله ۲: تغییرات لازم در Package.json

حالا لازمه به ری‌اکت نیتیو بگیم که فونت هامون کجا هستن و کجا دنبالشون بگرده. باید توی فایل Package.json بهش بفهمونیم. :) اینجوری:

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

مرحله ۳: لینک کردن

خیلی ساده با دستور

1react-native link

فونت هارو به پروژمون لینک میکنیم.

این کار اگه درست انجام بشه باید دنبال کلید UIAppFonts تو فایل Info.plist قسمت IOS پروژتون باشین. احتمالا چیزی این شکلی:

1234	<key>UIAppFonts</key>	
	<array>
		<string>vincHand Regular.ttf</string>
	</array>

و اما اندروید هم میاد فونت هارو توی مسیر “android/app/src/main/assets/fonts/” کپی میکنه:

مرحله ۴: استفاده کردن و استایل دادن :)

حالا برای استفاده از فونت های خیلی راحت میتونین از پراپرتی fontFamily استفاده کنین. اینجوری:

123456789101112131415161718192021const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontFamily: "vincHand",
    fontSize: 30,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    fontFamily: "vincHand",
    fontSize: 20,
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

هووورا :) موفق شدیم
در آخر خروجی ها باید این شکلی بشن:

شاد کد بزنین. ایام به کام :)

منبع - سورس در گیت لب