React Native | fontawesome

DoItDev·2021년 6월 12일

🤘 React Native Icon

리엑트 네이티브를 사용을 하면 물론 아이콘을 사용할 필요가 있다.
특별한 경우 사용을 안하지만 아이콘을 이용을 하여서 좀더
멋진 UI 를 가질 수 있다고 생각이든다
React native vector icon 이라는 패키지가 있는데 그것의 경우
의존성 주입을하는데 있어서 상당히 까다롭다...
그것 때문에 무언가 계속 빌드 에러 발생을 하고 그냥 폰트 어썸을 사용하기로 했다.

👊 폰트 어썸 사용법

공식 홈페이지에 있듯이 방법을 따라 해줬다.

 npm i --save react-native-svg @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-native-fontawesome

tsx file

import React, {memo} from 'react'
import ScrollLayout from "../../shared/component/scroll-layout";
import {Button, Text, View} from "react-native";

// 폰트 어썸 import 
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

import {NavigationProp} from '@react-navigation/native';

type HomeProps = {
    navigation: NavigationProp<any>
}

const Home = (props: HomeProps) => {

    const {navigation} = props

    return (
        <ScrollLayout>
            <View>
                <Text>
                    Hom Screen
                </Text>
                {/*폰트 어썸 사용하기*/}
                <FontAwesomeIcon icon={faCoffee} />

                <Button title={"onClick"} onPress={() => {
                    navigation.navigate("Modal")
                }}/>
            </View>
        </ScrollLayout>
    )
}


export default memo(Home);

일단 단일로 사용을 할려고 하기 때문에 위의 prpos 를 선택을 하였고
단순히 coffee 라고 사용을 하려고 했는데
에러가 발생을 했다 ... 일단은 적용을 목적을 하고 있어서 단일로 사용을 하다가
시간이 지난후 단순이 string 만 사용이 가능하게 세팅을 하려고 한다
일단 값을 가지고 세팅을 하도록한다.

props

icon: 아이콘을 넣는 것 (string or icon value)
height & width & size : 높낮이 넓이 사이즈를 조절 할 수 있다. (number)
color: 컬러 값 세팅
style: 폰터어썸에 사용하는 이너 스타일 object

위 6가지 외에 몇가지 있는데 아직 다 사용해 보진 않았다.
추후에 이 포스팅에 사용을 하고 추가하려고 한다.

icon string 으로 사용법

index.js

import {fas} from '@fortawesome/free-solid-svg-icons'
import {far} from '@fortawesome/free-regular-svg-icons'
전체를 사용하고 싶으면 위와 같은 형식으로 사용으로 하면된다.

import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';

import {library} from '@fortawesome/fontawesome-svg-core'
import {fas} from '@fortawesome/free-solid-svg-icons'
import {far} from '@fortawesome/free-regular-svg-icons'

library.add(fas, far)

AppRegistry.registerComponent(appName, () => App);

사용법

<Tap.Screen name={"홈"}
            component={Home}
            options={{
                tabBarIcon: ({focused, color, size}) => {
                    return <FontAwesomeIcon
                        color={color}
                        icon={['fas', "home"]}
                        size={size}/>;
                }
            }}
/>