วิธีเพิ่ม Google Font ลง React Native Expo ร่วมกับ React Navigation

วิธีเพิ่ม Google Fonts

วิธีเพิ่ม Google Font สำหรับงาน React Native ทั่วไป หรือ Project ที่ไม่ได้ใช้งาน React Navigation นั้นทำได้ไม่ยาก เพราะทำตามคู่มือของ expo-google-fonts ก็สามารถทพได้เลยไม่ติดขัดอะไร แต่พอเจอกับ Navigation แล้วฟังไปซะดื้อๆ อย่างงั้นแหละ

วันนี้ผมเลยจะ พามาดูวิธีแก้ไข ให้พอเรียก Font ขึ้นมาทำงานได้จริงๆ โดยที่ยังใช้งานตัว React Navigation อยู่ตามปรกตินั้นแหละ

วิธีเพิ่ม Google Font ลำดับงานที่เราจะทำคือ

  • Generate project ใหม่โดยใช้ Expo-CLI
  • Install และ import react-navigation, react-navigation-stack
  • Install expo-font
  • สร้างหน้าเปล่าๆขึ้นมา 2 หน้าสำหรับแสดงข้อความ
  • Download Font ที่ต้องการและใส่เข้าไปใน project
  • Import loadAsync helper จาก Expo Font
  • สร้าง styles css สำหรับเรียกใช้ font

เอาหล่ะ ที่นี้เราก็มาเริ่มจากการติดตั้งส่วนต่างๆกันก่อนเลย

เริ่มต้นกันที่ สร้าง Project ใหม่ โดยใช้คำสั่ง expo init แล้วตามด้วยชื่อ project

expo init testfont

จากนั้นมาที่ ขั้นตอนต่อไป คือเราจะติดตั้ง package ต่างๆ ทั้ง react navigation และ expo-font โดยเราจะใช้ คำสั่งต่อไปนี้ เรียงไปเรื่อยๆ

npm i react-navigation react-navigation-stack react-navigation-gesture-handler

แล้วก็

expo install expo-font

เพียงเท่านี้ เราก็มี Package ครบสำหรับ test กันแล้ว จากนั้นเราก็จะทำการ สร้างข้อความและหน้าอีกหน้า เพียงเพื่อที่จะเรียกใช้ font ของเรา เริ่มจากหน้า App.js กันก่อน

App.js

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from "./screens/HomeScreen";
import DetailScreen from "./screens/DetailScreen";
const AppNavigation  = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailScreen
  }
);
export default createAppContainer(AppNavigation);

HomeScreen.js

import React from "react";
import { View, Text, StyleSheet, Button } from "react-native";

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.textStyle}> Welcome to the Home Screen </Text>
      <Button
        title="See Details"
        onPress={() => navigation.navigate("Details")}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

export default HomeScreen;

DetailScreen.js

import React from "react";
import { View, Text, StyleSheet } from "react-native";

const DetailScreen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.textStyle}>
        เทควันโดโปรเจ็คท์ลอร์ดเทรนด์ เบอร์รีโอเวอร์เซ่นไหว้ป๋อหลอ สลัมโฮสเตสซาดิสต์ เปปเปอร์มินต์ซาดิสต์ฮาโลวีนเคลื่อนย้าย เพียบแปร้อุรังคธาตุแบคโฮแพนงเชิญสคริปต์ วอล์กฮิตแจ๊ส เอ๊าะโอเคเฟรช โอเปร่า บรา อิออนแคมปัสทิปกรีน โพลารอยด์แกงค์เลดี้ซาบะลีเมอร์ ต้าอ่วยจิ๊กซอว์ฉลุยลิมูซีนไง แครอทลิมูซีน วิทย์ดราม่ารีเสิร์ชสหรัฐภควัทคีตา สตาร์ทผิดพลาดแซมบ้าครัวซองต์ช็อป แฟ้บแรงใจแซวเพรสเบนโล

เมคอัพปัจเจกชนจิ๊ก ฟีเวอร์เจล โบตั๋นนางแบบยิว แครกเกอร์ ทิปพาเหรดเอ็นจีโอคอนเซปต์ วโรกาสไฮเอนด์สตรอเบอรี ฟอร์มบุ๋นสปอตทัวร์นาเมนท์ คำสาปคูลเลอร์ทอล์คแบ็กโฮ บร็อกโคลีแกงค์ ฮิบรูติงต๊องโกะ สตาร์ เด้อ ศึกษาศาสตร์มินต์โรลออนว้อดก้านายแบบ ว้อดก้า สลัมธรรมา สารขัณฑ์ไฮไลท์บึมผิดพลาด

มาร์เก็ตติ้ง ทอล์คแฟรี่ แซ็กโซโฟนมอลล์ คอนเซปต์โรแมนติก เคลียร์แจ๊กเก็ตพล็อตโหลนเวสต์ ไพลินซาบะ โหงวเฮ้งวิลล์รีเสิร์ช ห่วยเจไดสะบึมส์ ซังเตมาร์เก็ตเช็งเม้งคอมเมนต์ เตี๊ยมวิวเธค ไฟลท์ อีสเตอร์เซฟตี้ ความหมายคาราโอเกะแฟนซีเอฟเฟ็กต์วีเจ โปรเจคท์รุสโซผู้นำ แกงค์บ๋อยแอคทีฟ เกรดติงต๊อง

หมายปอง ซาฟารีลิสต์มายองเนส เฟรชสตริงพลานุภาพโมหจริต พาเหรดเซ่นไหว้ ฮ็อตด็อกมายาคติ รองรับซิมโฟนี่ ไมค์แตงโม เจ๊คอร์สเธคชาร์ปว้อย แอโรบิคกลาสฮิปฮอปโทรโข่ง ซูเปอร์นางแบบ กีวีอุปการคุณ หมั่นโถวเซอร์ หยวน ป๋าไฟลท์เที่ยงคืนยอมรับเทคโนแครต ฟรังก์บอมบ์ โมหจริต

ฮิตคอนโดแพ็คแฮนด์ คลิปสไปเดอร์ สป็อตแบรนด์ เคลม สเตอริโอ จิ๊กซูเปอร์เปโซอิเลียด งั้นแจ๊กพ็อต มือถือโพลารอยด์ โหลนแกงค์ เอ๊าะสโรชาธุรกรรม ต่อยอดเยอบีร่าแซนด์วิชม้าหินอ่อนอพาร์ทเมนท์ สเตเดียม เสกสรรค์ฟรุตไฮไลต์ความหมายเปราะบาง เบอร์รีสปิริต การันตีมือถือถ่ายทำ ปักขคณนานินจาร็อคแบคโฮ
      </Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    padding: 12,
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});
export default DetailScreen;

มาถึงตรงนี้ แปลว่าเราจะมีหน้าตา ทั้งหมดครบแล้ว พร้รอมทำงานได้ ให้คุณลอง Run ด้วยคำสั่ง expo start แล้วเรียก emulator ออกมาดู จะพบว่า สามารถแสดง ข้อความได้ตามปรกติ

ทีนี้มาขั้นตอน ถัดไปกัน เราจะต้องทำการ เข้าไปเลือก Font ที่เราต้องการ จากหน้าของ Google กันก่อน ว่าจะใช้ font ไหน จากนั้นก็ไป Download มาทั้งหมดทุกตัวเลย โดยเข้าที่หน้านี้

Google Font

วิธีเพิ่ม Google Font
หน้า Google Font

สร้าง Folder เปล่าชื่อว่า fonts ลงไปใน fodler ชื่อ assets ที่อยู่ใน project อีกที จากนั้นให้แตก zip ทั้งหมด แล้วเลือกเอาเฉพาะ ไฟล์ที่เป็น นามสกุล .ttf มาวางลงใน folder fonts

ต่อไป เราก็จะเริ่ม ทำการ import font เข้ามาใน Project กัน ตรงนี้ต้องเขียนเป็น function แบบนี้ ในหน้า App.js ในส่วนของ class App

state = {
    loaded: false
  };

_loadFontsAsync = async () => {
let isLoaded = await Font.loadAsync({
      // เปลี่ยนเป็นชื่อ font ที่คุณเตรียมไว้
      RobotoRegular: require("./assets/fonts/Roboto-Regular.ttf")
    });
    this.setState({ loaded: isLoaded });
  };
 
componentDidMount() {
    this._loadFontsAsync();
  }

เพียงเท่านี้ เราก็จะได้ font สำหรับพร้อมใช้แล้ว มาถึงวิธีใช้ก็ ไม่ยากแล้วครับ เพียงแค่เราเรียก ชื่อ font ผ่านทาง css เท่านั้นเอง

RobotoBold: { 
  fontFamily: 'RobotoBold' 
}, 
RobotoBlack: { 
  fontFamily: 'RobotoBlack' 
}, 
RobotoRegular: { 
  fontFamily: 'RobotoRegular' 
},

แล้วในทั้ง 2 หน้าของเรา ก็แค่เรียกผ่านทาง text แบบนี้

&lt;<em>Textstyle</em>={[styles.RobotoBold]}> Welcome &lt;/<em>Text</em>>

เท่านี้เอง เราก็สามารถ ใช้งาน font นี้ไปได้ ทั้ง Project กันแล้ว

ทีนี้คุณจะเห็น ความแตกต่าง จากบทความอื่นๆที่คุณพบ ใน Internet ประมาณ 2 ส่วน นั้นก็คือ เรื่องของ การเรียกใช้ Apploading ของ Expo ซึ่งปรกติแล้ว ใครๆก็ใช้ เพราะมันจะแก้ปัญหาเรื่อง load font ให้เรา แต่นั้นแหละ คือปัญหาของ การที่เราเอาไป ใช้งานกับ React Navigation ไม่ได้

ไม่แน่ใจว่า ติดตรงไหน เพราะพอเอาออก ก็สามารถใช้งานได้เลย และลองเขียนใหม่ แบบไม่ใช้ Navigation แต่ใช้งาน Apploading กับใช้ได้ซะงั้น

และอีกส่วน ที่มีความสัมพันธ์ กันกับ Apploading ก็คือ การเรียกเช็ค state ของตัว load font นั้นเอง หมายถถึงในนี้เราจะไม่เขียน if ดังเอาไว้ ว่าถ้ายังไม่ Load ให้ไป Load มาใหม่ เพราะมันจะ error เหมือนกัน

เอาเป็นว่า นี่เป็นวิธีแรก ที่ผมเจอ น่าจะยังมีวิธีดีๆ แบบอื่นๆ อีกที่จะทำให้ Project ออกมาสมบูรณ์กว่านี้ แต่ตอนนี้ ก็สามารถ แก้ปัญหาไปได้ ส่วนหนึ่งละครับ

คุณพ่อของน้องเกี้ยมอี๋ ไม่รู้ว่าใครซนกว่ากัน ทำงานเป็นโปรแกรมเม่า และ System Analyst ประจำบ้าน ดูหนัง ดูซีรี่ย์ เล่นเกมส์กับลูกชาย และเขียนบทความ

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top