[React Native] 이모티콘 넣기

React Native 이모티콘

리액트 네이티브(react native)에 아이콘을 넣어주는 방법에 대해 알아보자. 사용법은 굉장히 간단하다. 아래의 화면을 보면, V 이모콘을 확인할 수 있다. 아래의 예와 같이 다양한 이모티콘을 넣는 방법에 대해 알아보자.

 

 

결과화면

 

기본 환경

react native의 환경은 아래와 같은 환경이다.

$ npx create-react-native-app

 

 

 

설치

 우선 아래의 명령어로 expo-font 패키지를 설치해 준다.

 

$ expo install expo-font

 

 

이모티콘 찾기

아래의 url에 들어가서 그림과 같이 나오면 Filters를 눌러준다.

https://icons.expo.fyi/

 

Filter를 누르면, 여러가지 버튼이 나온다. 쓰고 싶은거 아무것이나 눌러준다(개인취양). 나는 FontAwesome5를 사용한다고 가정을 하고 진행하겠다. 그리고 사용하고 싶은 아이콘을 찾는다.

 

 

V 모양 이모티콘이 있어서 나는 저걸 선택했다. 클릭하면 아래와 같은 화면이 뜬다.

 

 

위의 코드를 그대로 붙여 쓰면 된다.

 

 

 

코드

정말 간단히 쓰면, import 하고 원하는 위치에 위의 render 코드를 넣어주면 된다. 간단히 적으면 아래와 같다.

 

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

import * as Font from "expo-font";
import { FontAwesome5 } from '@expo/vector-icons';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>
        Open up App.js to stgz on your app!
        <FontAwesome5 name="angellist" size={48} color="black" />
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

 

• import * as Font from "expo-font";  설치한 라이브러리를 불러온것이다.
• import { FontAwesome5 } from '@expo/vector-icons';   위에서 내가 체크한 종류 이름을 적어준것이다.
• <FontAwesome5 name="angellist" size={48} color="black" />  원하는 위치에 넣어주는 태그이다.

 

 아래와 같이 결과 값이 잘 나오는 것을 확인 할 수 있다.

 

 

결과화면

 

 

Loading 처리하기

기본개념은 아래를 보고 참고하자.

[React-native] AppLoad 로딩 페이지 만들기

[React-native] AppLoad 로딩 페이지 만들기

 

우리가 만들고자 하는것은 이모티콘을 다 다운 받기 전까지 화면을 보여주지 않도록 만드는 것이다. 아래와 같이 코드를 작성하면 된다.

 

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

import * as Font from "expo-font";
import { FontAwesome5 } from '@expo/vector-icons';

export default function App() {
  const [ready, setReady] = useState(false);
  const onFinish = () => setReady(true);
  const startLoading = async () => {
    await Font.loadAsync(FontAwesome5);
  };
  if (!ready) {
    return (
      <AppLoading 
        startAsync={startLoading}
        onFinish={onFinish}
        onError={console.error}
      />
    );
  }
  return (
    <View style={styles.container}>
      <Text>
        Open up App.js to stgz on your app!
        <FontAwesome5 name="angellist" size={48} color="black" />
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

위 코드를 참고해서 응용해보자!