{"id":985,"date":"2024-09-10T10:10:15","date_gmt":"2024-09-10T10:10:15","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=985"},"modified":"2024-09-11T10:06:47","modified_gmt":"2024-09-11T10:06:47","slug":"reactnative-using-icons","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2024\/09\/10\/reactnative-using-icons\/","title":{"rendered":"[ReactNative]\uc544\uc774\ucf58 \uc0ac\uc6a9\ud558\uae30 \/ Using icons"},"content":{"rendered":"\n

\uc774\uc804 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c \uc544\uc774\ucf58 \uc0ac\uc6a9\ud558\ub294 \ubd80\ubd84\uc744 \ub2e4\ub918\uc9c0\ub9cc \uc57d\uac04 \ucd94\uac00 \uc124\uba85\uc774 \ud544\uc694\ud55c\uac83 \uac19\uc2b5\ub2c8\ub2e4.
I covered the use of icons in the previous post, but I think a little more explanation is needed.<\/p>\n\n\n\n

React Native\uc5d0\uc11c \uc544\uc774\ucf58\uc744 \uc0ac\uc6a9\ud558\uae30\uc704\ud574\uc11c \ub2e4\ub978 \ubaa8\ub4c8\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can use other modules to use icons in React Native.<\/p>\n\n\n\n

\uc800 \uac19\uc740 \uacbd\uc6b0\uc5d0\ub294 \uc544\uc774\ucf58\uc758 \uc7a6\uc740 \uc624\ub958 \ubc1c\uc0dd\uc73c\ub85c \ub2e4\ub978 \ubaa8\ub4c8\uc744 \ucc3e\uac8c \ub410\uc2b5\ub2c8\ub2e4.
In my case, frequent icon errors led me to look for another module.<\/p>\n\n\n\n

\uc774\ubbf8 \uc774\uc804 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c \ub2e4\ub8ec \ub0b4\uc6a9\uc774\uc9c0\ub9cc \uc880 \ub354 \uc790\uc138\ud788 \uc18c\uac1c\ud574 \ub4dc\ub9bd\ub2c8\ub2e4.
This has already been covered in a previous post, but I will introduce it in more detail.<\/p>\n\n\n\n

\uc544\ub798\uc758 \uc6f9\uc0ac\uc774\ud2b8\uc5d0 \uac00\uc2dc\uba74 \ubaa8\ub4c8 \ub0b4\uc6a9\uc744 \ud655\uc778 \ud558\uc2e4\uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can check the module contents by visiting the website below.<\/p>\n\n\n\n

https:\/\/www.npmjs.com\/package\/react-native-vector-icons<\/a><\/p>\n\n\n\n

\uc5ec\uae30\uc11c \ub2e4\ub8f0 \uc544\uc774\ucf58 \ubaa8\ub4c8\uc740react-native-vector-icons\uc785\ub2c8\ub2e4.
The icon module we will cover here is react-native-vector-icons.<\/p>\n\n\n\n

\ud2b9\ubcc4\ud788 \uc8fc\ubaa9\ud560 \ubd80\ubd84\uc740 Bundled Icon Sets \ubd80\ubd84\uc73c\ub85c Ionicons\uc640 FontAwesome\uc785\ub2c8\ub2e4.
Particularly noteworthy are the Bundled Icon Sets, Ionicons and FontAwesome.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\uc704\uc758 \uc544\uc774\ucf58\uc678\uc5d0\ub3c4 \ub2e4\uc591\ud55c \uc544\uc774\ucf58\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
In addition to the icons above, various icons can be used.<\/p>\n\n\n\n

1.\ubaa8\ub4c8 \ucd94\uac00 \ubc29\ubc95 \/ How to add modules<\/strong><\/p>\n\n\n\n

-\uc0ac\uc6a9\ubc95\uc740 \uc544\ub798\uc758 npm\uba85\ub839\uc73c\ub85c \uc124\uce58 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

npm install --save react-native-vector-icons <\/code><\/pre>\n\n\n\n
-App.js\ud30c\uc77c\uc5d0\uc11c FontAwesome \uc544\uc774\ucf58\uc744 \uc0ac\uc6a9\ud558\uace0 \uc2f6\ub2e4\uba74 \uc544\ub798\uc640\uac19\uc774 \uc0ac\uc6a9\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.
If you want to use the FontAwesome icon in the App.js file, you can use it as follows.<\/p>\n\n\n\n
import Icon from 'react-native-vector-icons\/dist\/FontAwesome';<\/code><\/pre>\n\n\n\n
Ionicons\uc6f9\uc0ac\uc774\ud2b8\uc758 \ubaa8\ub4c8\uc744 \uc0ac\uc6a9\ud558\uace0 \uc2f6\ub2e4\uba74 \uc544\ub798\uc640 \uac19\uc774 App.js\ud30c\uc77c\uc5d0 \ucd94\uac00\ud558\uc2dc\uba74\ub429\ub2c8\ub2e4.
If you want to use the module of the Ionicons website, add it to the App.js file as shown below.<\/p>\n\n\n\n
import Icon from 'react-native-vector-icons\/Ionicons';<\/code><\/pre>\n\n\n\n
2.\uc544\uc774\ucf58 \uc0ac\uc6a9\ubc29\ubc95 \/ How to use the icon<\/strong><\/p>\n\n\n\n
-\uba3c\uc800 Ionicons\uc544\uc774\ucf58\uc744 \ubaa8\ub4c8\ub85c \ucd94\uac00\ud588\uc744 \uacbd\uc6b0 \uc544\ub798\uc640 \uac19\uc774 \uc0c1\ub2e8\uc5d0 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.
First, if you added the Ionicons icon as a module, add the code at the top as shown below.<\/p>\n\n\n\n
import Icon from 'react-native-vector-icons\/Ionicons';<\/code><\/pre>\n\n\n\n
-\uc774\uc804 \ud3ec\uc2a4\ud2b8\uc758 \ud0ed\ub124\ube44\uac8c\uc774\ud130\uc758 Home\ubd80\ubd84\uc5d0 \uc0ac\uc6a9\ub41c \uacbd\uc6b0 \ub2e4\ub978 \uc544\uc774\ucf58\uc744 \uc0ac\uc6a9\ud558\uace0 \uc2f6\ub2e4\uba74
If you want to use a different icon if it was used in the Home section of the tab navigator in the previous post,<\/p>\n\n\n\n
-<Icon name=”home”\uc5d0\uc11c \ub2e4\ub978 \uc544\uc774\ucf58\uc73c\ub85c \uc774\ub984\uc744 \ubc14\uafb8\uba74\ub429\ub2c8\ub2e4.
Just rename it from <Icon name=”home” to another icon.<\/p>\n\n\n\n
        <Tab.Screen name=\"Tab1\" component={Tab1} \r\n                  options={{\r\n                    tabBarLabel: 'Home',\r\n                    tabBarIcon: ({ color, size }) => (\r\n                    <Icon name=\"home\" color={ color } size={ size } \/>\r\n                    ),\r\n                  }} \r\n        \/><\/code><\/pre>\n\n\n\n
-\uc544\uc774\ucf58 \uc774\ub984\uc740 \uc544\ub798\uc758 \uc6f9\uc0ac\uc774\ud2b8\ub97c \ubc29\ubb38\ud574\uc11c \uc2a4\ud06c\ub864\uc744 \ub0b4\ub9ac\uba74 Ionicons\ud0ed\uc744 \ubcf4\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
For icon names, visit the website below and scroll down to see the Ionicons tab.<\/p>\n\n\n\n
https:\/\/oblador.github.io\/react-native-vector-icons\/<\/a><\/p>\n\n\n\n
-Ionicons\ud0ed\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc544\uc774\ucf58\uc744 \ucc3e\uc544\uc11c \uc774\ub984\uc744 \ud655\uc778\ud558\uace0 Home\uc744 \ub2e4\ub978 \uc774\ub984\uc73c\ub85c \uc218\uc815\ud569\ub2c8\ub2e4.
Find the icon you want to use in the Ionicons tab, check its name, and modify Home to a different name.<\/p>\n\n\n\n
\uc608\ub97c\ub4e4\uc5b4 home\ub300\uc2e0 home-outline\uc774\ub098 home-sharp\ub97c \uc0ac\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
For example, you can use home-outline or home-sharp instead of home.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"
\uc774\uc804 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c \uc544\uc774\ucf58 \uc0ac\uc6a9\ud558\ub294 \ubd80\ubd84\uc744 \ub2e4\ub918\uc9c0\ub9cc \uc57d\uac04 \ucd94\uac00 \uc124\uba85\uc774 \ud544\uc694\ud55c\uac83 \uac19\uc2b5\ub2c8\ub2e4.I covered the use of icons in the previous post, but I think a little more explanation is needed. React Native\uc5d0\uc11c \uc544\uc774\ucf58\uc744 \uc0ac\uc6a9\ud558\uae30\uc704\ud574\uc11c \ub2e4\ub978 \ubaa8\ub4c8\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.You can use other modules to use icons in React Native. \uc800 \uac19\uc740 \uacbd\uc6b0\uc5d0\ub294 \uc544\uc774\ucf58\uc758 \uc7a6\uc740 \uc624\ub958 \ubc1c\uc0dd\uc73c\ub85c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,1],"tags":[],"class_list":["post-985","post","type-post","status-publish","format-standard","hentry","category-reactnative","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=985"}],"version-history":[{"count":5,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/985\/revisions"}],"predecessor-version":[{"id":994,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/985\/revisions\/994"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}