이전 포스트에서 아이콘 사용하는 부분을 다뤘지만 약간 추가 설명이 필요한것 같습니다.
I covered the use of icons in the previous post, but I think a little more explanation is needed.
React Native에서 아이콘을 사용하기위해서 다른 모듈을 사용할 수 있습니다.
You can use other modules to use icons in React Native.
저 같은 경우에는 아이콘의 잦은 오류 발생으로 다른 모듈을 찾게 됐습니다.
In my case, frequent icon errors led me to look for another module.
이미 이전 포스트에서 다룬 내용이지만 좀 더 자세히 소개해 드립니다.
This has already been covered in a previous post, but I will introduce it in more detail.
아래의 웹사이트에 가시면 모듈 내용을 확인 하실수 있습니다.
You can check the module contents by visiting the website below.
https://www.npmjs.com/package/react-native-vector-icons
여기서 다룰 아이콘 모듈은react-native-vector-icons입니다.
The icon module we will cover here is react-native-vector-icons.
특별히 주목할 부분은 Bundled Icon Sets 부분으로 Ionicons와 FontAwesome입니다.
Particularly noteworthy are the Bundled Icon Sets, Ionicons and FontAwesome.
위의 아이콘외에도 다양한 아이콘을 사용할 수 있습니다.
In addition to the icons above, various icons can be used.
1.모듈 추가 방법 / How to add modules
-사용법은 아래의 npm명령으로 설치 할 수 있습니다.
npm install --save react-native-vector-icons -App.js파일에서 FontAwesome 아이콘을 사용하고 싶다면 아래와같이 사용하시면 됩니다.
If you want to use the FontAwesome icon in the App.js file, you can use it as follows.
import Icon from 'react-native-vector-icons/dist/FontAwesome';Ionicons웹사이트의 모듈을 사용하고 싶다면 아래와 같이 App.js파일에 추가하시면됩니다.
If you want to use the module of the Ionicons website, add it to the App.js file as shown below.
import Icon from 'react-native-vector-icons/Ionicons';2.아이콘 사용방법 / How to use the icon
-먼저 Ionicons아이콘을 모듈로 추가했을 경우 아래와 같이 상단에 코드를 추가합니다.
First, if you added the Ionicons icon as a module, add the code at the top as shown below.
import Icon from 'react-native-vector-icons/Ionicons';-이전 포스트의 탭네비게이터의 Home부분에 사용된 경우 다른 아이콘을 사용하고 싶다면
If you want to use a different icon if it was used in the Home section of the tab navigator in the previous post,
-<Icon name=”home”에서 다른 아이콘으로 이름을 바꾸면됩니다.
Just rename it from <Icon name=”home” to another icon.
<Tab.Screen name="Tab1" component={Tab1}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<Icon name="home" color={ color } size={ size } />
),
}}
/>-아이콘 이름은 아래의 웹사이트를 방문해서 스크롤을 내리면 Ionicons탭을 보실 수 있습니다.
For icon names, visit the website below and scroll down to see the Ionicons tab.
https://oblador.github.io/react-native-vector-icons/
-Ionicons탭에서 사용할 아이콘을 찾아서 이름을 확인하고 Home을 다른 이름으로 수정합니다.
Find the icon you want to use in the Ionicons tab, check its name, and modify Home to a different name.
예를들어 home대신 home-outline이나 home-sharp를 사용 할 수 있습니다.
For example, you can use home-outline or home-sharp instead of home.
