React Native'de Özel Yazı Tiplerini Kullanma Kılavuzu

React Native, uygulamanızı oluştururken aralarından seçim yapabileceğiniz birkaç varsayılan yazı tipi stili sağlar. Ancak, uygulamanıza kalabalık bir pazarda öne çıkması için ihtiyaç duyduğu özgünlüğü ve özgünlüğü sunmak için bazen özel yazı tipleri kullanmanız gerekebilir.

Bir sonraki React Native projenizi oluştururken özel yazı tiplerini nasıl uygulayacağınızı öğrenelim.

Yazı Tipi Dosya Biçimlerini Anlamak

React Native ile bir projeye özel yazı tipi dosyaları ekleyebilir ve uygulamalarınızdaki metin öğelerinin görünümünü özelleştirebilirsiniz. Bu özel yazı tipleri, farklı dosya formatlarına sahip yazı tipi dosyalarında gelir. Dosyalar, belirli bir yazı tipi yazı tipi için kodlanmış stil bilgileri içerir.

React Native mobil geliştirmede kullanacağınız en yaygın yazı tipi dosyası biçimleri şunlardır:

• TrueType Yazı Tipi (TTF): Bu, çoğu işletim sisteminin ve uygulamanın desteklediği yaygın bir yazı tipi dosyası biçimidir. TTF dosyaları nispeten küçüktür ve birçok karakter içerebilir.
instagram viewer
• OpenType Yazı Tipi (OTF): TTF'ye benzer ancak gelişmiş tipografik özellikler de içerebilir. OTF dosyaları, TTF dosyalarından daha büyüktür ve her uygulama bunları desteklemez.
• Gömülü OpenType Yazı Tipi (EOT): EOT dosyaları sıkıştırılmıştır ve izinsiz kullanımı önlemek için dijital haklar yönetimi (DRM) bilgileri içerebilir. Ancak, tüm tarayıcılar EOT'yi desteklemez ve genellikle modern projelerde kullanılması önerilmez.

Bir projede özel yazı tiplerini kullanırken, projenin ihtiyaçlarını karşılayan bir yazı tipi dosyası formatı seçmek önemlidir. Bu, hedef platform desteği, dosya boyutu, lisans gereksinimleri ve gelişmiş tipografik özellikler için destek gibi faktörleri içerebilir.

Yazı Tipi Dosyalarını React Native'de İçe Aktarma ve Uygulama

İnternet üzerindeki herhangi bir yerden bir yazı tipi dosyası indirebilir ve kullanmak üzere kişisel React Native projenize aktarabilirsiniz. Fakat, ücretsiz yazı tiplerini indirmek için birçok iyi, güvenli web sitesi var güvenli bir şekilde.

React Native projenize bir yazı tipi dosyası aktarmak için bir yazı tipi dosyası oluşturun. varlıklar/yazı tipleri dizini projenizin kök dizininde bulun ve yazı tipi dosyalarını bu dizine taşıyın.

Özel yazı tiplerini kullanmak için gereken adımlar, tamamen React Native tarafından oluşturulmuş bir proje veya Expo tarafından yönetilen bir React Native projesi ile çalışırken değişiklik gösterir.

Yerel CLI'yı Tepki

React Native CLI tarafından oluşturulmuş bir projeyle çalışıyorsanız, bir tepki-native.config.js dosyasını açın ve içindeki bu ayarları tanımlayın:

modül.ihracat = {
 proje: {
 ios: {},
 android: {}
 },
 varlıklar: [ './varlıklar/yazı tipleri/' ],
}

Bu yapılandırma, projeye, içinde depolanan yazı tipi varlıklarını dahil etmesini söyler. "./varlıklar/yazı tipleri/" böylece uygulama metin öğelerini işlerken bunlara erişebilir.

daha sonra bağlantı kurabilirsiniz varlıklar aşağıdakileri çalıştırarak projenize klasör ekleyin:

npx tepki yerel varlık

npx tepki-yerel bağlantı

Artık bağlantılı özel yazı tiplerini, CSS stilinizde normalde yaptığınız gibi, yazı tipi ailesi stilinde tam adlarını çağırarak kullanabilirsiniz:

Merhaba Dünya!/Text>
sabit stiller = StyleSheet.create({
 yazı tipiMetin: {
 font ailesi: "Eğim Prizma",
 yazı Boyutu: 20,
 },
});

Expo-CLI

Expo tarafından oluşturulan projeler için, özel yazı tiplerini içe aktarmak ve uygulamak için expo-yazı tipleri kitaplığını bir bağımlılık olarak kurmalısınız. Bu komutla kurun:

npx expo expo yazı tipini kur

Artık expo-fontları proje dosyanızda şu şekilde kullanabilirsiniz:

içe aktarmak Tepki, { useState, useEffect } itibaren'tepki';
içe aktarmak { Metin, Görünüm, Stil Sayfası } itibaren"tepki-yerli";
içe aktarmak * gibi Yazı tipi itibaren'expo-yazı tipi';
sabit Özel Metin = (sahne) => {
sabit [fontLoaded, setFontLoaded] = useState(YANLIŞ);
 useEffect(() => {
zaman uyumsuzişlevyük Yazı Tipi() {
beklemek Font.loadAsync({
'özel yazı tipi': gerekmek('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(doğru);
 }
 loadFont();
 }, []);
eğer (!fontYüklendi) {
geri dönmek<Metin>Yükleniyor...Metin>;
 }
geri dönmek (
font ailesi: 'özel yazı tipi' }}>
 {props.children}
 </Text>
 );
};
sabit uygulama = () => {
geri dönmek (

Merhaba dünya!/CustomText>
 </View>
 );
};
sabit stiller = StyleSheet.create({
 konteyner: {
 esnek: 1,
 İçeriği haklı çıkar: 'merkez',
 Öğeleri hizala: 'merkez',
 },
 metin: {
 yazı Boyutu: 24,
 yazı tipiAğırlığı: 'gözü pek',
 },
});
ihracatvarsayılan Uygulama;

Yukarıdaki kod bloğunu uygulayarak daha iyi yenileyebilir ve geliştirebilirsiniz. kapsayıcı ve sunum bileşenleri tasarım deseni.

İşte hem React Native CLI hem de Expo CLI uygulamalarının çıktısı:

Expo Uygulamanız için Varsayılan Yazı Tipi Olarak Özel Bir Yazı Tipi Ayarlama

React Native uygulamanızın tamamı için varsayılan yazı tipi olarak her birine uygulamak yerine özel bir yazı tipi kullanmak isteyebilirsiniz. Metin bileşen ayrı ayrı. Bunu yapmak için, Metin bileşen defaultProps herkes için varsayılan yazı tipi ailesini ayarlamak için Metin uygulamanızdaki bileşenler.

Kullan Text.defaultProps ayarlamak için özellik font ailesi özelliğini özel yazı tipinizin adına ekleyin.

İşte bir örnek:

içe aktarmak Tepki, { useEffect } itibaren'tepki';
içe aktarmak { Metin } itibaren"tepki-yerli";
içe aktarmak * gibi Yazı tipi itibaren'expo-yazı tipi';
sabit uygulama = () => {
 useEffect(() => {
zaman uyumsuzişlevyük Yazı Tipi() {
beklemek Font.loadAsync({
'özel yazı tipi': gerekmek('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = 'özel yazı tipi';
 }
 loadFont();
 }, []);
geri dönmek (
Merhaba dünya!/Text>
 );
};
ihracatvarsayılan Uygulama;

Kullanarak varsayılan yazı tipi ailesini ayarlama Text.defaultProps yalnızca varsayılan ayarlandıktan sonra oluşturulan Metin bileşenlerini etkiler. Varsayılan yazı tipi ailesini ayarlamadan önce zaten Metin bileşenleri oluşturduysanız, font ailesi bu bileşenler üzerindeki özellik ayrı ayrı.

Birden Fazla Yazı Tipi Stiliyle Özel Yazı Tipi Ailesi Oluşturma

React Native CLI tarafından oluşturulan bir uygulamada birden çok yazı tipi stiline sahip özel bir yazı tipi ailesi oluşturmak için önce yazı tipi dosyalarını projenize içe aktarmanız gerekir. Ardından, yazı tipi ağırlıklarını ve stillerini karşılık gelen yazı tipi dosyası yollarıyla eşleyen özel bir yazı tipi ailesi nesnesi oluşturun.

Örneğin:

içe aktarmak { Metin } itibaren"tepki-yerli";
içe aktarmak Özel yazı tipleri itibaren'../config/Yazı Tipleri';
sabit uygulama = () => {
sabit Özel Yazı Tipleri = {
'CustomFont-Normal': gerekmek('../fonts/CustomFont-Regular.ttf'),
'CustomFont-Kalın': gerekmek('../fonts/CustomFont-Bold.ttf'),
'CustomFont-İtalik': gerekmek('../fonts/CustomFont-Italic.ttf'),
 };
zaman uyumsuz componentDidMount() {
beklemek Font.loadAsync (CustomFonts);
 }
geri dönmek(

 Selam Dünya!
 </Text>
 );
};
sabit stiller = StyleSheet.create({
 metin: {
 font ailesi: 'CustomFont-Normal',
 yazı stili: 'italik',
 yazı tipiAğırlığı: 'gözü pek',
 yazı Boyutu: 20,
 },
});
ihracatvarsayılan Uygulama;

Bu örnekteki yazı tipi dosyası yollarının ve adlarının yalnızca yer tutucular olduğunu ve bunları gerçek yazı tipi dosyası yollarınız ve adlarınızla değiştirmeniz gerekeceğini unutmayın. Ayrıca, özel yazı tipi dosyalarınızın projenize doğru şekilde içe aktarıldığından ve yollarının yazı tipi ailesi nesnenizde tanımlananlarla eşleştiğinden emin olmalısınız.

React Native'de Özel Yazı Tipleri Üzerine Son Düşünceler

Özel yazı tipleri, React Native uygulamanıza benzersiz ve kişiselleştirilmiş bir dokunuş katabilir. Bu makalede, React Native'de özel yazı tiplerinin nasıl kullanılacağını, yazı tipi dosyalarını içe aktarma, özel bir yazı tipini şu şekilde ayarlama dahil tartıştık: tüm uygulama için varsayılan yazı tipi, birden çok yazı tipi stiliyle özel bir yazı tipi ailesi oluşturma ve kullanmadan özel yazı tipleri yükleme Fuar.

Her zaman kullandığınız herhangi bir yazı tipinin lisans kısıtlamalarını kontrol edin ve onu uygulamanızda kullanma izniniz olduğundan emin olun. Birden fazla özel yazı tipi yüklemenin uygulamanızın boyutunu artırabileceğini, bu nedenle yalnızca gerçekten ihtiyacınız olan yazı tiplerini dahil etmeniz gerektiğini unutmamanız da önemlidir.