Konu Başlıkları Gizle
React Native ile uygulama geliştirmeyi öğreniyorum ve bu problem karşıma çıktı. Aslında basit bir olay fakat benim gibi yeni öğrenenler için işler React gibi olmadığı için biraz zorlayıcı olabiliyor. Bu makaleyi hem bana gelecekte lazım olursa hem de yeni başlayan ve aynı sorun için çözüm arayışında olanlar için yazıyorum.
Öncelikle font işleri React'tan biraz farklı. React ile basitçe CSS dosyanıza font adresini import ederek ediyordunuz. Burada ise indirdiğiniz font dizinini React Native Config dosyasına eklemeniz lazım. Örnekle gösterelim:
Ben örnek için Google Fonts'dan
Ve en son olarak da terminalde aşağıdakı komut ile React Native otomatik font dosyalarını iOS ve Android tarafından tanınmasını sağlıyor.
Çıktı bu şekilde ise bir sorun yok demektir. Eğer
Bu gibi uyum sorununu çözmek için React Native kendisi bir çözüm sunuyor.
Örneğin üstteki koddaki yöntem ile kurduğumuz Inter fontunu her iki sistemde kullanabiliyoruz. Bunun için tek gerekli olan Platform. OS ile uygulamanın çalıştığı işletim sistemine göre
Sonuç olarak uygulamada kurduğumuz font gözüküyor.
Öncelikle font işleri React'tan biraz farklı. React ile basitçe CSS dosyanıza font adresini import ederek ediyordunuz. Burada ise indirdiğiniz font dizinini React Native Config dosyasına eklemeniz lazım. Örnekle gösterelim:
Ben örnek için Google Fonts'dan
Inter isimli font paketini indireceğim. Daha sonra indirdiğim arşivdeki TTF veya OTF dosyalarını projemde assets/fonts dizinine kopyalıyorum.react-native.config.js dosyası oluşturalım. Daha sonra dosyaya aşağıdakı satırları ekleyelim:
JavaScript:
module.exports = {
assets: ['./assets/fonts/'], // Font dizini
};Ve en son olarak da terminalde aşağıdakı komut ile React Native otomatik font dosyalarını iOS ve Android tarafından tanınmasını sağlıyor.
Bash:
npx react-native-assetÇıktı bu şekilde ise bir sorun yok demektir. Eğer
module-not-found gibi hata alıyorsanız react-native.config.js dosyasını oluşturmamışsınız demektir.Fontların kullanımı
Kurduğumuz fontlar iOS ve Android'de farklı olarak çağrılıyor. IOS'ta bu fontun tam ismi ile, Android'de ise font dosyasının ismi ile çağrılıyor.Bu gibi uyum sorununu çözmek için React Native kendisi bir çözüm sunuyor.
JSX:
import {View, Text, StyleSheet, Platform} from 'react-native';
import React from 'react';
const Welcome = () => {
return (
<View className="flex-1 justify-center px-9">
<Text className="text-2xl text-black" style={styles.font}>
Welcome
</Text>
</View>
);
};
const styles = StyleSheet.create({
font: {
fontFamily: Platform.OS === 'ios' ? 'Inter Bold' : 'Inter-Bold',
},
});
export default Welcome;Örneğin üstteki koddaki yöntem ile kurduğumuz Inter fontunu her iki sistemde kullanabiliyoruz. Bunun için tek gerekli olan Platform. OS ile uygulamanın çalıştığı işletim sistemine göre
fontFamily özelliğinin değişkenini ayarlamak.Sonuç olarak uygulamada kurduğumuz font gözüküyor.