Οδηγός για τη χρήση προσαρμοσμένων γραμματοσειρών στο React Native

Το React Native παρέχει πολλά προεπιλεγμένα στυλ γραμματοσειράς από τα οποία μπορείτε να επιλέξετε κατά τη δημιουργία της εφαρμογής σας. Ωστόσο, για να προσφέρετε στην εφαρμογή σας την πρωτοτυπία και την ατομικότητα που χρειάζεται για να ξεχωρίζει σε μια πολυσύχναστη αγορά, μπορεί περιστασιακά να χρειαστεί να χρησιμοποιήσετε προσαρμοσμένες γραμματοσειρές.

Ας μάθουμε πώς να εφαρμόζουμε προσαρμοσμένες γραμματοσειρές κατά τη δημιουργία του επόμενου έργου React Native.

Κατανόηση των μορφών αρχείων γραμματοσειράς

Με το React Native, μπορείτε να προσθέσετε προσαρμοσμένα αρχεία γραμματοσειράς σε ένα έργο και να προσαρμόσετε την εμφάνιση των στοιχείων κειμένου στις εφαρμογές σας. Αυτές οι προσαρμοσμένες γραμματοσειρές έρχονται σε αρχεία γραμματοσειρών με διαφορετικές μορφές αρχείων. Τα αρχεία περιέχουν κωδικοποιημένες πληροφορίες στυλ για μια συγκεκριμένη γραμματοσειρά.

Οι πιο συνηθισμένες μορφές αρχείων γραμματοσειράς που θα χρησιμοποιήσετε στην ανάπτυξη του React Native για κινητά είναι:

• Γραμματοσειρά TrueType (TTF): Αυτή είναι μια κοινή μορφή αρχείου γραμματοσειράς που υποστηρίζουν τα περισσότερα λειτουργικά συστήματα και εφαρμογές. Τα αρχεία TTF είναι σχετικά μικρά και μπορούν να περιέχουν πολλούς χαρακτήρες.
• Γραμματοσειρά OpenType (OTF): Είναι παρόμοια με το TTF, αλλά μπορεί επίσης να περιέχει προηγμένα τυπογραφικά χαρακτηριστικά. Τα αρχεία OTF είναι μεγαλύτερα από τα αρχεία TTF και δεν τα υποστηρίζουν όλες οι εφαρμογές.
• Ενσωματωμένη γραμματοσειρά OpenType (EOT): Τα αρχεία EOT είναι συμπιεσμένα και μπορούν να περιλαμβάνουν πληροφορίες διαχείρισης ψηφιακών δικαιωμάτων (DRM) για την αποφυγή μη εξουσιοδοτημένης χρήσης. Ωστόσο, δεν υποστηρίζουν όλα τα προγράμματα περιήγησης EOT και γενικά δεν συνιστάται για χρήση σε σύγχρονα έργα.

Όταν χρησιμοποιείτε προσαρμοσμένες γραμματοσειρές σε ένα έργο, είναι σημαντικό να επιλέξετε μια μορφή αρχείου γραμματοσειράς που να καλύπτει τις ανάγκες του έργου. Αυτό μπορεί να περιλαμβάνει παράγοντες όπως η υποστήριξη πλατφόρμας στόχου, το μέγεθος αρχείου, οι απαιτήσεις αδειοδότησης και η υποστήριξη για προηγμένες τυπογραφικές λειτουργίες.

Εισαγωγή και εφαρμογή αρχείων γραμματοσειράς στο React Native

Μπορείτε να κάνετε λήψη ενός αρχείου γραμματοσειράς από οπουδήποτε στο διαδίκτυο και να το εισαγάγετε στο προσωπικό σας έργο React Native για χρήση. Ωστόσο, Υπάρχουν πολλοί καλοί, ασφαλείς ιστότοποι για λήψη δωρεάν γραμματοσειρών από με ασφάλεια.

Για να εισαγάγετε ένα αρχείο γραμματοσειράς στο έργο σας React Native, δημιουργήστε ένα στοιχεία/γραμματοσειρές κατάλογο στη ρίζα του έργου σας και μετακινήστε αρχεία γραμματοσειρών σε αυτόν.

Τα βήματα που απαιτούνται για τη χρήση προσαρμοσμένων γραμματοσειρών ποικίλλουν όταν εργάζεστε με ένα έργο που δημιουργήθηκε αποκλειστικά από το React Native ή ένα έργο React Native που διαχειρίζεται η Expo.

React Native CLI

Εάν εργάζεστε με ένα έργο που δημιουργήθηκε από το React Native CLI, δημιουργήστε ένα react-native.config.js αρχείο και ορίστε αυτές τις ρυθμίσεις μέσα σε αυτό:

μονάδα μέτρησης.εξαγωγές = {
 έργο: {
 ios: {},
 android: {}
 },
 περιουσιακά στοιχεία: [ './assets/fonts/' ],
}

Αυτή η διαμόρφωση λέει στο έργο να περιλαμβάνει στοιχεία γραμματοσειράς που είναι αποθηκευμένα στο "./assets/fonts/" κατάλογο, ώστε η εφαρμογή να έχει πρόσβαση σε αυτά κατά την απόδοση στοιχείων κειμένου.

Στη συνέχεια, μπορείτε να συνδέσετε το περιουσιακά στοιχεία φάκελο στο έργο σας εκτελώντας τα εξής:

npx react-native-asset

npx react-native link

Τώρα μπορείτε να χρησιμοποιήσετε τις συνδεδεμένες προσαρμοσμένες γραμματοσειρές όπως θα κάνατε συνήθως στο στυλ CSS σας καλώντας το ακριβές όνομά τους στο στυλ γραμματοσειράς οικογένειας:

Γεια σου Κόσμε!</Text>
συνθ styles = StyleSheet.create({
 fontText: {
 fontFamily: 'Tilt Prism',
 μέγεθος γραμματοσειράς: 20,
 },
});

Expo-CLI

Για έργα που δημιουργούνται από την Expo, θα πρέπει να εγκαταστήσετε τη βιβλιοθήκη γραμματοσειρών expo ως εξάρτηση για εισαγωγή και εφαρμογή προσαρμοσμένων γραμματοσειρών. Εγκαταστήστε το με αυτήν την εντολή:

npx expo εγκατάσταση expo-font

Τώρα μπορείτε να χρησιμοποιήσετε γραμματοσειρές expo στο αρχείο του έργου σας όπως:

εισαγωγή React, { useState, useEffect } από'αντιδρώ';
εισαγωγή { Κείμενο, Προβολή, Φύλλο στυλ } από'react-native';
εισαγωγή * όπως και Γραμματοσειρά από'expo-font';
συνθ Προσαρμοσμένο κείμενο = (στηρίγματα) => {
συνθ [fontLoaded, setFontLoaded] = useState(ψευδής);
 useEffect(() => {
ασυγχρονισμόςλειτουργίαloadFont() {
αναμένω Font.loadAsync({
"προσαρμοσμένη γραμματοσειρά": απαιτώ('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(αληθής);
 }
 loadFont();
 }, []);
αν (!fontLoaded) {
ΕΠΙΣΤΡΟΦΗ<Κείμενο>Φόρτωση...Κείμενο>;
 }
ΕΠΙΣΤΡΟΦΗ (
γραμματοσειράΟικογένεια: "προσαρμοσμένη γραμματοσειρά" }}>
 {props.children}
 </Text>
 );
};
συνθ Εφαρμογή = () => {
ΕΠΙΣΤΡΟΦΗ (

Γεια σου κόσμο!</CustomText>
 </View>
 );
};
συνθ styles = StyleSheet.create({
 δοχείο: {
 καλώδιο: 1,
 justifyContent: 'κέντρο',
 στοίχιση στοιχείων: 'κέντρο',
 },
 κείμενο: {
 μέγεθος γραμματοσειράς: 24,
 Βάρος γραμματοσειράς: 'τολμηρός',
 },
});
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Θα μπορούσατε να ανανεώσετε και να βελτιώσετε καλύτερα το παραπάνω μπλοκ κώδικα εφαρμόζοντας το μοτίβο σχεδίασης κοντέινερ και στοιχείων παρουσίασης.

Ακολουθεί η έξοδος των εφαρμογών React Native CLI και Expo CLI:

Ορισμός προσαρμοσμένης γραμματοσειράς ως προεπιλεγμένης γραμματοσειράς για την εφαρμογή Expo σας

Μπορεί να θέλετε να χρησιμοποιήσετε μια προσαρμοσμένη γραμματοσειρά ως την προεπιλεγμένη γραμματοσειρά για ολόκληρη την εφαρμογή React Native αντί να την εφαρμόσετε σε κάθε Κείμενο συστατικό ξεχωριστά. Για να το κάνετε αυτό, μπορείτε να χρησιμοποιήσετε το Κείμενο συστατικά defaultProps για να ορίσετε την προεπιλεγμένη οικογένεια γραμματοσειρών για όλους Κείμενο στοιχεία στην εφαρμογή σας.

Χρησιμοποιήστε το Text.defaultProps ιδιοκτησία για να ορίσετε το γραμματοσειράΟικογένεια ιδιοκτησία στο όνομα της προσαρμοσμένης γραμματοσειράς σας.

Εδώ είναι ένα παράδειγμα:

εισαγωγή React, { useEffect } από'αντιδρώ';
εισαγωγή { Κείμενο } από'react-native';
εισαγωγή * όπως και Γραμματοσειρά από'expo-font';
συνθ Εφαρμογή = () => {
 useEffect(() => {
ασυγχρονισμόςλειτουργίαloadFont() {
αναμένω Font.loadAsync({
"προσαρμοσμένη γραμματοσειρά": απαιτώ('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = "προσαρμοσμένη γραμματοσειρά";
 }
 loadFont();
 }, []);
ΕΠΙΣΤΡΟΦΗ (
Γεια σου κόσμο!</Text>
 );
};
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Ρύθμιση της προεπιλεγμένης οικογένειας γραμματοσειρών χρησιμοποιώντας Text.defaultProps θα επηρεάσει μόνο τα στοιχεία κειμένου που δημιουργούνται αφού οριστεί η προεπιλογή. Εάν έχετε ήδη δημιουργήσει στοιχεία κειμένου πριν ορίσετε την προεπιλεγμένη οικογένεια γραμματοσειρών, θα πρέπει να ορίσετε το γραμματοσειράΟικογένεια ιδιοκτησία σε αυτά τα εξαρτήματα μεμονωμένα.

Δημιουργία μιας προσαρμοσμένης οικογένειας γραμματοσειρών με πολλαπλά στυλ γραμματοσειράς

Για να δημιουργήσετε μια προσαρμοσμένη οικογένεια γραμματοσειρών με πολλά στυλ γραμματοσειράς σε μια εφαρμογή που δημιουργήθηκε από το React Native CLI, θα χρειαστεί πρώτα να εισαγάγετε τα αρχεία γραμματοσειράς στο έργο σας. Στη συνέχεια, δημιουργήστε ένα προσαρμοσμένο αντικείμενο οικογένειας γραμματοσειρών που αντιστοιχίζει τα βάρη και τα στυλ γραμματοσειρών στις αντίστοιχες διαδρομές του αρχείου γραμματοσειρών.

Για παράδειγμα:

εισαγωγή { Κείμενο } από'react-native';
εισαγωγή Προσαρμοσμένες γραμματοσειρές από"../config/Fonts";
συνθ Εφαρμογή = () => {
συνθ Προσαρμοσμένες γραμματοσειρές = {
'CustomFont-Regular': απαιτώ('../fonts/CustomFont-Regular.ttf'),
'CustomFont-Bold': απαιτώ('../fonts/CustomFont-Bold.ttf'),
'CustomFont-Italic': απαιτώ('../fonts/CustomFont-Italic.ttf'),
 };
ασυγχρονισμός componentDidMount() {
αναμένω Font.loadAsync (CustomFonts);
 }
ΕΠΙΣΤΡΟΦΗ(

 Γειά σου Κόσμε!
 </Text>
 );
};
συνθ styles = StyleSheet.create({
 κείμενο: {
 fontFamily: 'CustomFont-Regular',
 στυλ γραμματοσειράς: 'πλάγιο',
 Βάρος γραμματοσειράς: 'τολμηρός',
 μέγεθος γραμματοσειράς: 20,
 },
});
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Σημειώστε ότι οι διαδρομές και τα ονόματα του αρχείου γραμματοσειρών σε αυτό το παράδειγμα είναι απλώς σύμβολα κράτησης θέσης και θα πρέπει να τα αντικαταστήσετε με τις πραγματικές διαδρομές και τα ονόματα του αρχείου γραμματοσειρών. Επιπλέον, πρέπει να διασφαλίσετε ότι τα προσαρμοσμένα αρχεία γραμματοσειράς σας εισάγονται σωστά στο έργο σας και ότι οι διαδρομές τους ταιριάζουν με αυτές που ορίζονται στο αντικείμενο της οικογένειας γραμματοσειρών σας.

Τελικές σκέψεις για προσαρμοσμένες γραμματοσειρές στο React Native

Οι προσαρμοσμένες γραμματοσειρές μπορούν να προσθέσουν μια μοναδική και εξατομικευμένη πινελιά στην εφαρμογή React Native. Σε αυτό το άρθρο, συζητήσαμε τον τρόπο χρήσης προσαρμοσμένων γραμματοσειρών στο React Native, συμπεριλαμβανομένης της εισαγωγής αρχείων γραμματοσειρών, του ορισμού μιας προσαρμοσμένης γραμματοσειράς ως την προεπιλεγμένη γραμματοσειρά για ολόκληρη την εφαρμογή, δημιουργώντας μια προσαρμοσμένη οικογένεια γραμματοσειρών με πολλά στυλ γραμματοσειράς και φορτώνοντας προσαρμοσμένες γραμματοσειρές χωρίς χρήση Expo.

Ελέγχετε πάντα τους περιορισμούς αδειοδότησης οποιασδήποτε γραμματοσειράς που χρησιμοποιείτε και βεβαιωθείτε ότι έχετε άδεια να τη χρησιμοποιήσετε στην εφαρμογή σας. Είναι επίσης σημαντικό να έχετε κατά νου ότι η φόρτωση πολλών προσαρμοσμένων γραμματοσειρών μπορεί να αυξήσει το μέγεθος της εφαρμογής σας, επομένως θα πρέπει να συμπεριλάβετε μόνο τις γραμματοσειρές που πραγματικά χρειάζεστε.