Panduan Menggunakan Font Kustom di React Native
Table of content:
React Native menyediakan beberapa gaya font default untuk dipilih saat membangun aplikasi Anda. Namun, untuk menawarkan orisinalitas dan individualitas yang dibutuhkan aplikasi agar menonjol di pasar yang padat, terkadang Anda mungkin perlu menggunakan font khusus.
Mari pelajari cara menerapkan font khusus saat membangun proyek React Native Anda berikutnya.
Memahami Format File Font
Dengan React Native, Anda dapat menambahkan file font khusus ke proyek dan menyesuaikan tampilan elemen teks di aplikasi Anda. Font kustom ini datang dalam file font dengan format file yang berbeda. File berisi informasi gaya yang disandikan untuk jenis huruf font tertentu.
Baca Juga:
Format file font paling umum yang akan Anda gunakan dalam pengembangan seluler React Native adalah:
- TrueType Font (TTF): Ini adalah format file font umum yang didukung sebagian besar sistem operasi dan aplikasi. File TTF relatif kecil dan dapat berisi banyak karakter.
- OpenType Font (OTF): Ini mirip dengan TTF tetapi juga dapat berisi fitur tipografi tingkat lanjut. File OTF lebih besar dari file TTF dan tidak semua aplikasi mendukungnya.
- Embedded OpenType Font (EOT): File EOT dikompresi dan dapat menyertakan informasi manajemen hak digital (DRM) untuk mencegah penggunaan yang tidak sah. Namun, tidak semua browser mendukung EOT dan umumnya tidak disarankan untuk digunakan dalam proyek modern.
Saat menggunakan font khusus dalam proyek, penting untuk memilih format file font yang memenuhi kebutuhan proyek. Ini mungkin melibatkan faktor-faktor seperti dukungan platform target, ukuran file, persyaratan lisensi, dan dukungan untuk fitur tipografi tingkat lanjut.
Mengimpor & Menerapkan File Font di React Native
Anda dapat mengunduh file font dari mana saja di internet dan mengimpornya ke proyek React Native pribadi Anda untuk digunakan. Namun, ada banyak situs web yang bagus dan aman untuk mengunduh font gratis dengan aman.
Untuk mengimpor file font ke proyek React Native Anda, buat file aset/font direktori di root proyek Anda, dan pindahkan file font ke dalamnya.
Langkah-langkah yang diperlukan untuk menggunakan font khusus bervariasi ketika bekerja dengan proyek React Native murni atau proyek React Native yang dikelola Expo.
Bereaksi CLI Asli
Jika Anda bekerja dengan proyek yang dihasilkan React Native CLI, buat file react-native.config.js file dan tentukan pengaturan ini di dalamnya:
module.exports = {
project: {
ios: {},
android: {}
},
assets: [ './assets/fonts/' ],
}
Konfigurasi ini memberi tahu proyek untuk menyertakan aset font yang disimpan di “./aset/font/” direktori sehingga aplikasi dapat mengaksesnya saat merender elemen teks.
Anda kemudian dapat menautkan aktiva folder ke proyek Anda dengan menjalankan yang berikut ini:
npx react-native-asset
Ini hanya akan berfungsi pada versi aplikasi React Native yang lebih baru dari 0,69 ke atas. Proyek React Native yang lebih lama harus menjalankan perintah ini sebagai gantinya:
npx react-native link
Sekarang Anda dapat menggunakan font khusus yang ditautkan seperti yang biasa Anda lakukan dalam gaya CSS dengan memanggil nama persisnya dalam gaya font-family:
<Text style={styles.fontText}>Hello, World!</Text>const styles = StyleSheet.create({
fontText: {
fontFamily: 'Tilt Prism',
fontSize: 20,
},
});
Expo-CLI
Untuk proyek yang dibuat oleh Expo, Anda harus menginstal pustaka font-expo sebagai dependensi untuk mengimpor dan menerapkan font kustom. Instal dengan perintah ini:
npx expo install expo-font
Sekarang Anda dapat menggunakan font-expo di file proyek Anda seperti ini:
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import * as Font from 'expo-font';const CustomText = (props) => {
const [fontLoaded, setFontLoaded] = useState(false);
useEffect(() => {
async function loadFont() {
await Font.loadAsync({
'custom-font': require('./assets/fonts/CustomFont.ttf'),
});
setFontLoaded(true);
}
loadFont();
}, []);
if (!fontLoaded) {
return <Text>Loading...</Text>;
}
return (
<Text style={{ ...props.style, fontFamily: 'custom-font' }}>
{props.children}
</Text>
);
};
const App = () => {
return (
<View style={styles.container}>
<CustomText style={styles.text}>Hello, world!</CustomText>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 24,
fontWeight: 'bold',
},
});
export default App;
Anda dapat mengubah dan meningkatkan blok kode di atas dengan lebih baik dengan menerapkan pola desain wadah dan komponen presentasi.
Berikut adalah output dari aplikasi React Native CLI dan Expo CLI:
Mengatur Font Kustom sebagai Font Default untuk Aplikasi Expo Anda
Anda mungkin ingin menggunakan font khusus sebagai font default untuk seluruh aplikasi React Native Anda daripada menerapkannya ke masing-masing Teks komponen secara individual. Untuk melakukan ini, Anda dapat menggunakan Teks komponen Alat Peraga bawaan untuk mengatur keluarga font default untuk semua Teks komponen di aplikasi Anda.
Menggunakan Text.defaultProps properti untuk mengatur fontFamily properti ke nama font khusus Anda.
Berikut contohnya:
import React, { useEffect } from 'react';
import { Text } from 'react-native';
import * as Font from 'expo-font';const App = () => {
useEffect(() => {
async function loadFont() {
await Font.loadAsync({
'custom-font': require('./assets/fonts/CustomFont.ttf'),
});
Text.defaultProps.style.fontFamily = 'custom-font';
}
loadFont();
}, []);
return (
<Text>Hello, world!</Text>
);
};
export default App;
Mengatur keluarga font default menggunakan Text.defaultProps hanya akan memengaruhi komponen Teks yang dibuat setelah default ditetapkan. Jika Anda telah membuat komponen Teks sebelum menyetel keluarga font default, Anda perlu menyetelnya fontFamily properti pada komponen tersebut secara individual.
Membuat Keluarga Font Kustom Dengan Berbagai Gaya Font
Untuk membuat keluarga font khusus dengan beberapa gaya font dalam aplikasi yang dihasilkan React Native CLI, pertama-tama Anda harus mengimpor file font ke proyek Anda. Kemudian buat objek keluarga font khusus yang memetakan bobot dan gaya font ke jalur file font yang sesuai.
Misalnya:
import { Text } from 'react-native';
import CustomFonts from '../config/Fonts';const App = () => {
const CustomFonts = {
'CustomFont-Regular': require('../fonts/CustomFont-Regular.ttf'),
'CustomFont-Bold': require('../fonts/CustomFont-Bold.ttf'),
'CustomFont-Italic': require('../fonts/CustomFont-Italic.ttf'),
};
async componentDidMount() {
await Font.loadAsync(CustomFonts);
}
return(
<Text style={styles.text}>
Hello, world!
</Text>
);
};
const styles = StyleSheet.create({
text: {
fontFamily: 'CustomFont-Regular',
fontStyle: 'italic',
fontWeight: 'bold',
fontSize: 20,
},
});
export default App;
Perhatikan bahwa jalur dan nama file font dalam contoh ini hanyalah placeholder, dan Anda harus menggantinya dengan jalur dan nama file font Anda yang sebenarnya. Selain itu, Anda harus memastikan bahwa file font kustom Anda diimpor dengan benar ke proyek Anda dan jalurnya cocok dengan yang ditentukan dalam objek keluarga font Anda.
Pikiran Final tentang Font Kustom di React Native
Font khusus dapat menambahkan sentuhan unik dan personal ke aplikasi React Native Anda. Pada artikel ini, kita telah membahas cara menggunakan font kustom di React Native, termasuk mengimpor file font, menyetel font kustom sebagai font default untuk seluruh aplikasi, membuat keluarga font kustom dengan beberapa gaya font, dan memuat font kustom tanpa menggunakan Pameran.
Selalu periksa batasan lisensi font apa pun yang Anda gunakan dan pastikan Anda memiliki izin untuk menggunakannya di aplikasi Anda. Penting juga untuk diingat bahwa memuat beberapa font khusus dapat meningkatkan ukuran aplikasi Anda, jadi Anda sebaiknya hanya menyertakan font yang benar-benar Anda perlukan.
Artikel Terkait
