해당 글은 react native를 expo로 작업한 내용을 기반으로 작성하였습니다.
이번에는 내가 적용하면서 조금 애를 먹었던, 리액트 네이티브에서 작성하는 글씨의 폰트를 적용하는 방법과 아이콘 이미지를 가져와서 넣어주는 방법에 대해서 알아볼 예정이다.
폰트 적용뻡
1. 폰트 선택하기
원하는 폰트를 폰트 사이트 및 드라이브에서 가져온다. 폰트의 파일 형식은 ttf로 되어있어야 한다.
구글 폰트
https://fonts.google.com/
나같은 경우에는 위에 있는 구글 폰트 사이트에서 원하는 폰트를 다운받았다.
2. 폰트 가져오기
현재 리액트 네이티브 작업을 진행 중인 공간에 assets폴더 속에 fonts 폴더를 하나 만들고, 해당 폴더에 폰트를 가져온다.
3. expo-font import하기
폰트를 사용하기 위해 필요한 expo-font를 import 해준다.
import * as Font from "expo-font";만약, expo-font가 없는 경우에는 명령어를 실행하여 expo-font를 따로 설치해주어야 한다.
npm install expo-font
4. 폰트 로딩값을 불러오는 함수 설정해주기.
리액트 네이티브를 실행할 때, 폰트가 로딩되지 않아 폰트보다 어플의 실행이 먼저 작동하는 경우가 있다. 이런 상황에서 폰트가 로딩되지 않는 문제를 해결하기 위해서 미리 폰트의 로딩 상태 여부에 따라 출력을 결정할 수 있도록 하는 코드를 작성한다.
constructor(props){
super(props);
this.state={isReady: false}; //로딩이 되지 않은 경우 로딩여부를 false로 변경
}
async componentDidMount() {
await Font.loadAsync({'사용자지정이름': require('사용할 폰트 경로'),}); //폰트를 로드함
this.setState({isReady: true}); //폰트가 로드된 경우 로딩여부를 true로 변경
}위의 코드를 export ... component 함수 안에 넣는다.
그 후에, 실행되는 화면의 값을 if문으로 넣어준다.
if(this.state.isReady){ //로딩이 되어야 작동
return ( //폰트가 로딩된 후에 보여줄 화면에 대하여 작성
);
}
else{
return ( //폰트가 로딩되지 않을 경우에 보여줄 로딩창에 대하여 작성
);
}이렇게 해 두면, 폰트가 로딩되지 않은 경우에 폰트를 불러오는 스타일을 호출하지 않게 되므로 오류가 발생하지 않는다.
주의할 점으로는, 폰트가 로딩되지 않는 경우에 보여지는 화면에 대한 설정에서 폰트를 사용하면 안된다는 것이다!
5. 폰트 사용하기
스타일에서 폰트를 불러온다.
fontFamily: '폰트명',fontFamily를 이용한다.
이렇게 폰트를 설정하게 되면..
이릏게 귀여운 폰트를 쓸 수 있게 된다!
참고하며 도움이 된 사이트
:https://smok95.tistory.com/264
아이콘 적용뻡
따로 작성하려 하였으나, 아이콘 적용뻡은 생각보다 쉬웠으므로, 그냥 폰트에 끼워서 팔기로 했다.
1. 모듈 설치하기
여러가지 아이콘들을 사용할 수 있도록 하는 모듈을 다운받는다.
npm install @expo/vector-icons
2. 아이콘 고르기!
사용하고 싶은 아이콘을 골라준다
아이콘은 해당 사이트에서 골라주면 된다. 사용하고 싶은 아이콘을 누르면, 해당 아이콘을 사용하기 위해서 import해야하는 것과 사용하는 방법이 나와있다. 그~대로 사용하면 된다.
3. imort/적용하기
위의 말대로 사이트에 아주 친절하게 설명이 되어있으므로 이에 대해서는 생략하겠다. (코드는 App.js에서 작성해 주어야 한다.)
참고용으로 올리자면 나는 고양이 발바닥 아이콘을 사용하였다.
import {Fontisto} from '@expo/vector-icons'; //고양이 아이콘을 불러오기 위해숴
tabBarIcon:()=>( //탭 화면에 사용할 아이콘을 설정
<Fontisto name="baidu" size={24}/>) //고양이 발바닥 아이콘의 이름과 크기
아쥬 귀요미한 고양이 발바닥을 볼 수 있다.
+ 신경쓰고 싶지 않은 주황색 버섯같은 주황색 오류
간혹 어플을 만들다 보면, 실행에는 큰 문제가 되지 않지만, 시뮬레이션을 돌렸을 때 계속해서 하단에 경고문구가 뜨는 바람에 불편한 적이 있을 수 있다.
내가 그랬다. 아주, 아작을 내고 싶은 마음 뿐이었다.
이럴 때에는 오류를 깡그리 무시할 수 있는 좋은 방법이 있다.
그거슨 바로 LogBox.ignoreLogs함수이다!
LogBox.ignoreLogs(["오류 문장 그대로 복붙해오기","여러개도 가능"]);
해당 코드를 통해 경고 문구를 제거할 수 있다. 경고 문구를 싸그리 무시하는 것 보다는 버전이 달라서 생긴 오류나, 크게 상관이 없다는 것이 증명된 오류들을 무시하는 데 사용하는 것이 좋다. 경고문구도 계속 쌓이면 언젠가는 또 문제를 낳을 때가 많기 떄문이다. 이것도 경험담이다.
폰트적용뻡 4번에서 애를 좀 먹었던 것 같다. 아직 자바스크립트에 대해서 잘 모르기도 하고, 비동기식함수? 와 관련한 내용이라고 하는 것 같은데 나는 비동기식함수가 뭔지도 모르는 감자라 여기저기 뒤져가며 고생 좀 했다.
다음번에는 될지는 모르겠지만 이전에 다루었던 탭 간 이동과 두 화면간 이동 등 여러 네비게이션을 동시에 다룰 수 있는 방법에 대해서 알아볼 예정이다.
그런데 안타깝게도 요즘은 좀 바빠서 아마 리액트 네이티브는 다음달 쯤에나 올릴 수 있지 않을까 싶다.
