react native vector icons
10.2.0
사용자 정의 가능한 벡터 아이콘의 전력으로 React Native Application을 높이십시오. 버튼, 로고 및 내비게이션 또는 탭 막대를 장식하는 데 이상적 으로이 아이콘은 프로젝트에 완벽하게 통합됩니다. 그들의 다양성은 확장과 스타일링을 쉽게 만듭니다.
.svg 파일을 기본적으로 통합하려면 react-native-vector-image 탐색 할 수 있습니다.
팁
RNVI의 새로운 버전이 곧 출시 될 예정입니다. 거의 구성 설정이 없습니다. 피드백을 환영합니다. Monorepo 지점에서 시도해보십시오.
이 라이브러리가 유익하다면 후원 옵션을 친절하게 생각합니다. 우리의 구상 된 노력은 저장소의 구조 조정을 Monorepo 아키텍처로 구조화하는 것을 포함합니다. 이 전환은 아이콘 세트의 독립적 인 버전을 강화하고 성능을 향상 시키며 번들 크기를 줄이며 커뮤니티 기여를 단순화합니다. 귀하의 후원은 이러한 발전을 실현하는 데 중추적 인 역할을합니다.
모든 아이콘을 탐색하십시오.
AntDesign ( 298 Icons)Entypo ( 411 아이콘이있는 v1.0.1)EvilIcons ( 70 개의 아이콘이있는 v1.10.1)Feather ( 286 개의 아이콘을 특징으로하는 v4.28.0)FontAwesome (v4.7.0 675 아이콘 포함)FontAwesome 5 에서 Fonticons, Inc. (v5.15.3 제공 1598 무료 및 7848 Pro 아이콘 제공)FontAwesome 6 Fonticons, Inc.가 설계 한 (V6.6.0 2016 무료 및 16150 Pro 아이콘을 특징으로하는 V6.6.0)Fontisto (v3.0.4 615 아이콘을 특징으로)Foundation ( 283 개의 아이콘이있는 v3.0)Ionicons 에 의해 제작 된 이온 ( 1338 개의 아이콘을 포함하는 V7.1.0)MaterialIcons ( 2189 아이콘을 특징으로하는 v4.0.0)MaterialCommunityIcons ( 6596 아이콘 포함 v6.5.95)Octicons ( 250 개의 아이콘이있는 V16.3.1)Zocial (v1.4.0 100 아이콘)SimpleLineIcons ( 189 개의 아이콘이 포함 된 v2.5.5) npm install --save react-native-vector-iconsiOS에서 번들 아이콘을 사용하려면 다음 단계를 수행하십시오.
iOS 디렉토리에서 npx pod-install 실행하십시오
Info.plist 편집 및 응용 프로그램 (또는 xcode autocomplete가 작동하지 않는 경우 UIAPPFONTS ) 이 제공하는 글꼴 이라는 속성을 추가하십시오.
< key >UIAppFonts</ key >
< array >
< string >AntDesign.ttf</ string >
< string >Entypo.ttf</ string >
< string >EvilIcons.ttf</ string >
< string >Feather.ttf</ string >
< string >FontAwesome.ttf</ string >
< string >FontAwesome5_Brands.ttf</ string >
< string >FontAwesome5_Regular.ttf</ string >
< string >FontAwesome5_Solid.ttf</ string >
< string >FontAwesome6_Brands.ttf</ string >
< string >FontAwesome6_Regular.ttf</ string >
< string >FontAwesome6_Solid.ttf</ string >
< string >Foundation.ttf</ string >
< string >Ionicons.ttf</ string >
< string >MaterialIcons.ttf</ string >
< string >MaterialCommunityIcons.ttf</ string >
< string >SimpleLineIcons.ttf</ string >
< string >Octicons.ttf</ string >
< string >Zocial.ttf</ string >
< string >Fontisto.ttf</ string >
</ array >위의 단계는 다음과 같이 보일 수 있습니다.
참고 : 글꼴을 추가하거나 제거한 후 프로젝트를 다시 컴파일하십시오.
안드로이드에서 글꼴 관리를 더 매끄럽게하려면이 방법을 사용하십시오.
android/app/build.gradle ( android/build.gradle 이 아님) 편집하고 추가 :
apply from : file( " ../../node_modules/react-native-vector-icons/fonts.gradle " )복사중인 글꼴을 사용자 정의하려면 다음을 사용하십시오.
project . ext . vectoricons = [
iconFontNames : [ ' MaterialIcons.ttf ' , ' EvilIcons.ttf ' ] // Specify font files
]
apply from : file( " ../../node_modules/react-native-vector-icons/fonts.gradle " )
your-monorepo/
├─ node_modules/
│ ├─ react-native-vector-icons
├─ apps/
│ ├─ YourApp/
│ │ ├─ android/
│ │ │ ├─ app/
│ │ │ │ ├─ build.gradle
같은 경로 업데이트 :
project.ext.vectoricons = [
+ iconFontsDir: "../../../../node_modules/react-native-vector-icons/Fonts",
iconFontNames: ["YourFont.ttf", "..."]
]
- apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
+ apply from: "../../../../node_modules/react-native-vector-icons/fonts.gradle라이브러리를 수동으로 통합하려면 다음을 수행하십시오.
Fonts 폴더에서 내용을 복사하여 android/app/src/main/assets/fonts 에 붙여 넣습니다 (폴더 이름이 소문자, 즉 fonts 인지 확인하십시오). getImageSource 지원을위한 라이브러리 통합 다음 단계는 선택 사항이며 Icon.getImageSource 함수를 사용하려는 경우에만 필요합니다.
아래와 같이 android/settings.gradle 파일 편집 :
rootProject.name = 'MyApp'
include ':app'
+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') 아래와 같이 android/app/build.gradle ( 앱 폴더에 위치)을 편집하십시오.
apply plugin: 'com.android.application'
android {
...
}
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
//noinspection GradleDynamicVersion
implementation "com.facebook.react:react-native:+" // From node_modules
+ implementation project(':react-native-vector-icons')
} 아래 그림과 같이 MainApplication.java ( android/app/src/main/java/... 에 깊은 곳에 위치)를 편집하십시오 (편집 할 two 장소가 있습니다) :
package com.myapp;
+ import com.oblador.vectoricons.VectorIconsPackage;
....
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
+ , new VectorIconsPackage()
);
}이 선택적 단계는 반응 네이티브 앱이 자동 연결을 지원하지 않는 경우에만 필요합니다. 그렇지 않으면 이것을 건너 뛸 수 있습니다.
react-native-macos 를 통해
react-native-macos 사용하여 MacOS 프로젝트에서 라이브러리를 설정하려면 다음을 수행하십시오.
node_modules/react-native-vector-icons 폴더를 찾아 Fonts 폴더를 Xcode의 프로젝트로 드래그하십시오. 앱이 "Targets에 추가"에서 확인하고 프롬프트되면 "폴더 참조 생성"을 선택하십시오.
Info.plist 를 편집하고 Application Fonts Resource Path (또는 ATSApplicationFontsPath 라는 새 속성을 포함하십시오. 이 속성의 값을 Fonts 로 설정하십시오.
프로젝트 /ios 폴더에서 실행 :
bundle exec pod install 새로운 글꼴을 추가 한 후 프로젝트를 다시 컴파일해야합니다. 또한 Fonts 폴더가 Xcode 프로젝트의 빌드 단계 내의 복사 번들 리소스 섹션 아래에 있는지 확인하십시오.
이 단계는 벡터 아이콘 라이브러리를 MACOS 프로젝트에 효과적으로 통합하면서 react-native-macos 프레임 워크를 사용합니다.
react-native-windows 통해
react-native-windows 사용하여 Windows 프로젝트에서 라이브러리를 설정하려면 다음을 수행하십시오.
최상위 프로젝트 ( /windows/project-name/Assets )에서는 글꼴 파일을 복사하여 붙여 넣습니다.
Visual Studio에서 솔루션을 엽니 다 :
에이. 솔루션의 자산 폴더를 마우스 오른쪽 버튼으로 클릭하십시오. 비. 추가> 기존 항목을 선택하십시오. 기음. /windows/project-name/assets 에 복사 한 글꼴을 탐색하고 선택하십시오. 디. 추가를 클릭하십시오.
새로운 글꼴을 추가 한 후 프로젝트를 다시 컴파일해야합니다.
이 단계를 수행하면 벡터 아이콘 라이브러리를 Windows 프로젝트에 원활하게 통합하여 react-native-windows 프레임 워크를 활용합니다.
react-native-web 사용하여 React-Native 모바일 앱을 웹에 포팅하려면 웹 앱 측면에서 글꼴이 알려져 있는지 확인해야합니다.
CSS에 사용하는 각 글꼴에 대한 글꼴 패밀리를 추가해야합니다.
웹 앱을 디버깅 할 때 웹 브라우저의 개발자 콘솔을 살펴보면 누락 된 Font-Families를 디버깅 할 수 있습니다.
참고 : WebPack 또는 이와 유사한 경우 URL-LOADER 또는 FILE-LOADER를 사용하여 TTF 글꼴로드를 처리하도록 WebPack을 구성해야 할 수도 있습니다 . 자세한 내용은 웹 설정을 참조하십시오.
App.css 또는 이와 유사하게 글꼴 패밀리 사양을 추가하십시오.
@font-face {
src : url (path/to/fonts/Ionicons.ttf);
font-family : "Ionicons" ;
}
@font-face {
src : url (path/to/fonts/FontAwesome.ttf);
font-family : "FontAwesome" ;
}
@font-face {
src : url (path/to/fonts/FontAwesome5_Brands.ttf);
font-family : "FontAwesome5_Brands" ;
font-weight : 400 ; /* Regular weight */
font-style : normal;
}
@font-face {
src : url (path/to/fonts/FontAwesome5_Regular.ttf);
font-family : "FontAwesome5_Regular" ;
font-weight : 400 ; /* Regular weight */
font-style : normal;
}
@font-face {
src : url (path/to/fonts/FontAwesome5_Solid.ttf);
font-family : "FontAwesome5_Solid" ;
font-weight : 900 ; /* Bold weight for solid */
font-style : normal;
}
@font-face {
src : url (path/to/fonts/MaterialIcons.ttf);
font-family : "MaterialIcons" ;
}
@font-face {
src : url (path/to/fonts/Feather.ttf);
font-family : "Feather" ;
}
@font-face {
src : url (path/to/fonts/MaterialCommunityIcons.ttf);
font-family : "MaterialCommunityIcons" ;
}
/* TODO: Add other icons fonts here */웹 팩을 사용하여 라이브러리를 웹 프로젝트와 통합하려면 다음을 수행하십시오.
Webpack 구성 파일에서 url-loader 또는 file-loader 사용하여 TTF 파일을 처리하려면 섹션을 추가하십시오.
{
test : / .ttf$ / ,
loader : "url-loader" , // or directly file-loader
include : path . resolve ( __dirname , "node_modules/react-native-vector-icons" ) ,
}JavaScript Entry Point에서 글꼴 파일을 소비하고 필요한 스타일 태그를 주입하십시오.
// Use the prebuilt version of RNVI located in the dist folder
import Icon from 'react-native-vector-icons/dist/FontAwesome' ;
// Generate the required CSS
import iconFont from 'react-native-vector-icons/Fonts/FontAwesome.ttf' ;
const iconFontStyles = `@font-face {
src: url( ${ iconFont } );
font-family: FontAwesome;
}` ;
// Create a stylesheet
const style = document . createElement ( 'style' ) ;
style . type = 'text/css' ;
// Append the iconFontStyles to the stylesheet
if ( style . styleSheet ) {
style . styleSheet . cssText = iconFontStyles ;
} else {
style . appendChild ( document . createTextNode ( iconFontStyles ) ) ;
}
// Inject the stylesheet into the document head
document . head . appendChild ( style ) ;이 단계를 수행하면 벡터 아이콘 라이브러리를 웹 프로젝트에 웹 프로젝트에 원활하게 통합하여 웹 애플리케이션 내에서 아이콘을 쉽게 사용할 수 있습니다.
이 패키지를 업그레이드하려면 종종 프로젝트에 연결된 글꼴 파일도 업데이트해야합니다. 자동 링크가 작동하면이 작업을 다시 실행하면 글꼴을 업데이트해야합니다. 그렇지 않으면 설치 섹션에 요약 된 단계를 따라야합니다.
Icon 구성 요소위의 번들 아이콘 중 하나를 사용하거나 자신의 사용자 정의 글꼴을 굴릴 수 있습니다.
import Icon from 'react-native-vector-icons/FontAwesome' ;
const myIcon = < Icon name = "rocket" size = { 30 } color = "#900" / > ;모든 텍스트 속성 및 다음 :
| 소품 | 설명 | 기본 |
|---|---|---|
size | 아이콘의 크기는 스타일 객체에서 fontSize 로 전달 될 수도 있습니다. | 12 |
name | 표시 할 아이콘은 아이콘 탐색기 앱 또는 위의 링크 중 하나를 참조하십시오. | 없음 |
color | 아이콘의 색상. | 상속 |
| 소품 | 설명 |
|---|---|
getFontFamily | 현재 아이콘을 텍스트로 검색하는 데 사용되는 글꼴 패밀리를 반환합니다. 사용법 : const fontFamily = Icon.getFontFamily() |
getImageSource | Image Component et al.과 함께 사용하기 위해 아이콘의 비트 맵 버전의 소스로 해결하는 약속을 반환합니다. 사용법 : const source = await Icon.getImageSource(name, size, color) |
getImageSourceSync | getImageSource 와 동일하지만 동기입니다. 사용법 : const source = Icon.getImageSourceSync(name, size, color) |
getRawGlyphMap | 아이콘 세트의 원시 글리프 맵을 반환합니다. 사용법 : const glyphMap = Icon.getRawGlyphMap() |
hasIcon | 현재 아이콘 세트에서 이름이 유효한지 확인합니다. 사용법 : const isNameValid = Icon.hasIcon(name) |
Icon Text 구성 요소 위에 구축되므로 대부분의 스타일 속성은 예상대로 작동하므로 다음과 같이 연주하는 데 유용 할 수 있습니다.
backgroundColorborderWidthborderColorborderRadiuspaddingmargincolorfontSize 참고 : Android Text 에서는 현재 border* Styles를 지원하지 않으므로 Icon View 위해 단순히 랩핑하십시오.
이 중 일부를 결합하여 예를 들어 다음과 같은 것을 만들 수 있습니다.
Icon.Button 구성 요소왼쪽에 아이콘이있는 버튼을 만드는 편의 구성 요소.
import Icon from 'react-native-vector-icons/FontAwesome' ;
const myButton = (
< Icon . Button
name = "facebook"
backgroundColor = "#3b5998"
onPress = { this . loginWithFacebook }
>
Login with Facebook
< / Icon . Button >
) ;
const customTextButton = (
< Icon . Button name = "facebook" backgroundColor = "#3b5998" >
< Text style = { { fontFamily : 'Arial' , fontSize : 15 } } >
Login with Facebook
< / Text >
< / Icon . Button >
) ; 모든 Text , TouchableHighlight 또는 TouchableWithoutFeedback 속성과 함께 다음과 더불어 :
| 소품 | 설명 | 기본 |
|---|---|---|
color | 텍스트 및 아이콘 색상, iconStyle 사용하거나 다른 색상이 필요한 경우 Text 구성 요소를 중첩하십시오. | white |
size | 아이콘 크기. | 20 |
iconStyle | 아이콘에만 적용되는 스타일, 여백 또는 다른 색상을 설정하는 데 좋습니다. 참고 : iconStyle 사용하거나 마진을 사용하거나 불안정한 동작을 기대하십시오. | {marginRight: 10} |
backgroundColor | 버튼의 배경색. | #007AFF |
borderRadius | 버튼의 테두리 반경은 비활성화하려면 0 으로 설정합니다. | 5 |
onPress | 버튼을 눌렀을 때 호출 된 함수. | 없음 |
이것을 확장 가능한 벡터 아이콘이 아닌 비트 맵 이미지에 의존하는 다른 구성 요소에 이것을 연결하는 편리한 방법. 위에서 설명한대로 인수 name , size 및 color 취합니다.
Icon . getImageSource ( 'user' , 20 , 'red' ) . then ( source =>
this . setState ( { userIcon : source } )
) ; 또는 렌더링 글리치를 피하려면 동기 메소드 아이콘을 사용하여 동기 Icon.getImageSourceSync 사용할 수 있습니다. 이 방법은 차단되어 성과 처벌이 발생할 수 있음을 명심하십시오. 그러나 후속 통화는 캐시를 사용합니다.
일부 글꼴은 오늘날이 라이브러리에서 지원되는 여러 스타일 인 Fontawesome 5를 사용합니다. 사용법은 표준 Icon 구성 요소와 거의 동일합니다.
import Icon from 'react-native-vector-icons/FontAwesome5' ;
const myIcon1 = < Icon name = "comments" size = { 30 } color = "#900" / > ; // Defaults to regular
const myIcon2 = < Icon name = "comments" size = { 30 } color = "#900" solid / > ;
const myIcon3 = < Icon name = "comments" size = { 30 } color = "#900" light / > ; // Only in FA5 Pro Icon 의 모든 정적 메소드는 다중 스타일의 글꼴로 지원됩니다.
| 소품 | 설명 |
|---|---|
getFontFamily | 현재 아이콘을 텍스트로 검색하는 데 사용되는 글꼴 패밀리를 반환합니다. 사용법 : const fontFamily = Icon.getFontFamily(style) |
getImageSource | Image Component et al.과 함께 사용하기 위해 아이콘의 비트 맵 버전의 소스로 해결하는 약속을 반환합니다. 사용법 : const source = await Icon.getImageSource(name, size, color) |
getImageSourceSync | getImageSource 와 동일하지만 동기입니다. 사용법 : const source = Icon.getImageSourceSync(name, size, color) |
getRawGlyphMap | 아이콘 세트의 원시 글리프 맵을 반환합니다. 사용법 : const glyphMap = Icon.getRawGlyphMap(style) |
hasIcon | 현재 아이콘 세트에서 이름이 유효한지 확인합니다. 사용법 : const isNameValid = Icon.hasIcon(name, style) |
getStyledIconSet | 이것을 사용하여 단일 스타일의 Icon 구성 요소를 얻으십시오. 용법. const StyledIcon = Icon.getStyledIconSet(style) |
스타일 인수가 전달되지 않으면 (또는 유효하지 않은 경우) 메소드는 사전 정의 된 폴백으로 기본값을받습니다.
Icon.Button 이 지원되며 사용법은 Icon 과 같습니다.
import Icon from 'react-native-vector-icons/FontAwesome5' ;
const myButton = (
< Icon . Button name = "facebook" onPress = { this . loginWithFacebook } solid >
Login with Facebook
< / Icon . Button >
) ; createIconSet(glyphMap, fontFamily[, fontFile]) 키 glyphMap 아이콘 이름이고 값은 UTF-8 문자이거나 문자 코드입니다. fontFamily 파일 이름 이 아닌 글꼴의 이름입니다. Font Book.App에서 글꼴을 열면 이름을 배우십시오. 선택적으로 Android 지원에 대한 세 번째 fontFile 인수를 전달하면 사용자 정의 글꼴 파일 이름이어야합니다.
import { createIconSet } from 'react-native-vector-icons' ;
const glyphMap = { 'icon-name' : 1234 , test : '∆' } ;
const Icon = createIconSet ( glyphMap , 'FontName' , 'font-name.ttf' ) ;createIconSetFromFontello(config[, fontFamily[, fontFile]]) 편의 메소드 Fontello 구성 파일을 기반으로 사용자 정의 글꼴을 작성하는 방법. 위에서 설명한대로 글꼴을 가져오고 프로젝트에서 편리한 config.json 삭제하는 것을 잊지 마십시오.
import { createIconSetFromFontello } from 'react-native-vector-icons' ;
import fontelloConfig from './config.json' ;
const Icon = createIconSetFromFontello ( fontelloConfig ) ;createIconSetFromIcoMoon(config[, fontFamily[, fontFile]]) import { createIconSetFromIcoMoon } from 'react-native-vector-icons' ;
import icoMoonConfig from './selection.json' ;
const Icon = createIconSetFromIcoMoon (
icoMoonConfig ,
'LineAwesome' ,
'line-awesome.ttf'
) ; Icomoon에서 다운로드 옵션을 사용하고 있는지 확인하고 다운로드 한 .zip 에 포함 된 .json 파일을 사용하십시오. 위의 지침에 따라 .ttf 글꼴 파일을 프로젝트로 가져와야합니다.
createMultiStyleIconSet(styles [, options]) import { createMultiStyleIconSet } from 'react-native-vector-icons' ;
/*
* This is just example code, you are free to
* design your glyphmap and styles to your liking
*/
import glyphmap from './glyphmap.json' ;
/*
* glyphmap = {
* "style1": [
* "hello",
* "world"
* ],
* "style2": [
* "foo",
* "bar"
* ]
* }
*/
const glyphKeys = Object . keys ( glyphmap ) ; /* ["style1", "style2"] */
const options = {
defaultStyle : 'style1' ,
glyphValidator : ( name , style ) => glyphKeys . indexOf ( name ) !== - 1 ,
fallbackFamily : ( name ) => {
for ( let i = 0 ; i < glyphKeys . length ; i ++ ) {
const style = glyphKeys [ i ] ;
if ( glyphmap [ style ] . indexOf ( name ) !== - 1 ) {
return style ;
}
}
/* Always return some family */
return glyphKeys [ 0 ] ;
}
} ;
/*
* The styles object consits of keys, which will be
* used as the styles later, and objects which are
* used as style objects for the font. The style
* should have unique characteristics for each font
* in order to ensure that the right one will be
* chosen. FontAwesome 5 uses font weight since
* 5.7.0 in order to diffirentiate the styles but
* other properties (like fontFamily) can be used.
* It's just a standard RN style object.
*/
const styles = {
style1 : {
fontWeight : '700'
} ,
style2 : {
fontWeight : '100'
}
} ;
const Icon = createMultiStyleIconSet ( styles , options ) ;
/* Uses default style (style1) */
< Icon name = { 'hello' } / >
< Icon name = { 'world' } style1 / >
/* Default style is style1 but this will fall back to style2 */
< Icon name = { 'foo' } / >
/* This will also fall back to style2 */
< Icon name = { 'foo' } style1 / >
/* Regular use of style2 */
< Icon name = { 'bar' } style2 / >| 옵션 | 설명 | 기본 |
|---|---|---|
| 기본 스타일 | 렌더링 중에 스타일이 제공되지 않으면 사용할 스타일의 이름입니다. | Object.keys(styles)[0] |
| 폴백 패밀리 | 글리프를 사용할 수없는 경우 가족을 선택하는 기능. 함수는 글리프의 name 매개 변수로 받아 들여야합니다. 가족이라면 이름을 반환합니다. | (name) => Object.keys(styles)[0] |
| 글리프 발리 디터 | 선택한 스타일에 글리프를 사용할 수 있는지 확인하는 기능. 그것은 순서대로 매개 변수로 name 과 style 가지고 있습니다. 글리프가 유효하지 않거나 false 이 아닌 경우 true 반환합니다. | (name, style) => true |
Xcodeproj Resources 폴더 및 Info.plist 에서 .ttf 를 수동으로 참조해야합니다.
React Native에는 Animated 이라는 놀라운 애니메이션 라이브러리가 제공됩니다. 아이콘과 함께 사용하려면이 라인으로 애니메이션 구성 요소를 만듭니다. const AnimatedIcon = Animated.createAnimatedComponent(Icon) . 고급 애니메이션 라이브러리 반응 신용 분석 가능도 사용할 수도 있습니다.
Examples/IconExplorer 폴더에서 IconExplorer 프로젝트를 사용해보십시오. 아이콘을 검색 할 수도 있습니다.
import Icon from 'react-native-vector-icons/Ionicons' ;
function ExampleView ( props ) {
return < Icon name = "ios-person" size = { 30 } color = "#4F8EF7" / > ;
} TabBarIOS @react-navigation/bottom-tabs를 선호하여 Core에서 제거 되었으므로이 라이브러리에서 편의성 구성 요소로 제거됩니다. 대신 Icon 사용하더라도 위에서 설명한 대로이 프로젝트를 가져오고 링크하는 것을 잊지 마십시오.
아래는 react-navigation 에서 가져온 예입니다.
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' ;
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons' ;
const Tab = createBottomTabNavigator ( ) ;
function MyTabs ( ) {
return (
< Tab . Navigator
initialRouteName = "Feed"
screenOptions = { {
activeTintColor : '#e91e63' ,
} }
>
< Tab . Screen
name = "Feed"
component = { Feed }
options = { {
tabBarLabel : 'Home' ,
tabBarIcon : ( { color , size } ) => (
< MaterialCommunityIcons name = "home" color = { color } size = { size } / >
) ,
} }
/ >
< Tab . Screen
name = "Notifications"
component = { Notifications }
options = { {
tabBarLabel : 'Updates' ,
tabBarIcon : ( { color , size } ) => (
< MaterialCommunityIcons name = "bell" color = { color } size = { size } / >
) ,
tabBarBadge : 3 ,
} }
/ >
< Tab . Screen
name = "Profile"
component = { Profile }
options = { {
tabBarLabel : 'Profile' ,
tabBarIcon : ( { color , size } ) => (
< MaterialCommunityIcons name = "account" color = { color } size = { size } / >
) ,
} }
/ >
< / Tab . Navigator >
) ;
} ToolbarAndroid 코어에서 제거 되었으므로이 라이브러리에서 편의성 구성 요소로 제거됩니다. 대신 getImageSourceSync 사용하더라도 위에서 설명한 대로이 프로젝트를 가져오고 링크하는 것을 잊지 마십시오.
import ToolbarAndroid from '@react-native-community/toolbar-android' ;
import Icon from 'react-native-vector-icons/Ionicons' ;
const navIcon = Icon . getImageSourceSync ( 'md-arrow-back' , 24 , 'white' ) ;
const overflowIcon = Icon . getImageSourceSync ( 'md-more' , 24 , 'white' ) ;
const settingsIcon = Icon . getImageSourceSync ( 'md-settings' , 30 , 'white' ) ;
const twitterIcon = Icon . getImageSourceSync ( 'logo-twitter' , 25 , '#4099FF' ) ;
function ToolbarView ( props ) {
return (
< ToolbarAndroid
title = "Home"
titleColor = "white"
navIcon = { navIcon }
onIconClicked = { props . navigator . pop }
actions = { [
{
title : 'Settings' ,
icon : settingsIcon ,
show : 'always' ,
} ,
{
title : 'Follow me on Twitter' ,
icon : twitterIcon ,
show : 'ifRoom' ,
} ,
] }
overflowIcon = { overflowIcon }
/ >
) ;
} import { Text } from 'react-native' ;
import Icon from 'react-native-vector-icons/Ionicons' ;
function ExampleView ( props ) {
return (
< Text >
Lorem < Icon name = "ios-book" color = "#4F8EF7" / > Ipsum
< / Text >
) ;
} 연결된 CSS 파일이 포함 된 아이콘 글꼴이 이미있는 경우 generate-icon 스크립트로 세트 세트를 쉽게 생성 할 수 있습니다.
./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon > Components/MyIcon.js
--componentName 및 --fontFamily 와 같이 아래에 나열되지 않은 플래그는 템플릿으로 전달됩니다.
-p , --prefixCSS 선택기 접두사 [기본값 : ".icon-"]
-t , --templatejs 템플릿 문자열 형식의 템플릿 [기본값 : "./template/iconset.tpl"]]]
기본 템플릿의 경우 --componentName 및 --fontFamily 제공하십시오.
-o , --output출력을 파일에 저장하고 기본값을 stdout으로 저장합니다
android/app/src/main/assets/fonts 에 복사했는지 확인하십시오.rm -rf android/app/build 로 빌드 폴더를 삭제하십시오.Resources 폴더에서 .ttf 참조를 수동으로 추가했는지 확인하십시오.Info.plist 에 표시되는지 확인하십시오. 전체 폴더를 추가하고 파란색 인 경우 경로에 추가해야합니다.rm -rf ios/build 로 빌드 폴더를 삭제하십시오 NPM 및 Android 파일 계층 모두 결합 할 때 매우 깊고 악화되는 경향이 있습니다. Windows 파일 시스템은 최대 길이가 있으므로 긴 파일 이름 주소가 Execution failed for task ':react-native-vector-icons:processReleaseResources' 수많은 오류가 발생합니다. 따라서 프로젝트 폴더의 경로를 가능한 한 짧게 유지하십시오.
업그레이드 후 기본 프로젝트에 링크 된 글꼴 파일을 업데이트하지 않았을 것입니다. 그러나 iOS는 앱을 구축 할 때 글꼴을 번들로 만들기 때문에 Android 대상에만 적용됩니다 (문제가 발생하면 Xcode에서 빌드를 청소하십시오). Android에서는 프로젝트를 다시 인정하거나 글꼴을 수동으로 업데이트 할 수 있습니다. 자동으로 동기화되도록 Gradle 접근 방식을 사용하십시오.
때로는 공급 업체가 최신 릴리스에서 일부 아이콘을 제거하기로 결정 하므로이 패키지와 관련이 없습니다. 이전 버전의 글꼴에 의존하는 경우 사용자 정의 글꼴로 추가 할 수 있습니다.
아마도 @expo/vector-icons 및 react-native-vector-icons 동시에 사용하려고 할 것입니다. 엑스포 패키지는 이것을 별칭하며 우선합니다. 프로젝트에서 이러한 라이브러리 중 하나만 사용하십시오.
react-native-vector-icons 에 대한 JSX 지원을 트랜스 필러 구성에 추가해야합니다.
예를 들어, JSX를 지원하는 모듈 목록 (WebPack을 사용하는 경우)을 지원하는 모듈 목록에 react-native-vector-icons 추가하려면 JSX 구성 포함 섹션에서 react-native-vector-icons 에 상대 경로를 추가해야 할 수도 있습니다.
웹 팩에서 babel을 사용하는 경우 다음과 같은 것처럼 보일 수 있습니다.
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /.(js|mjs|jsx|ts|tsx)$/,
include: [
paths.appSrc,
+ // START - support for JSX in react-native-vector-icons
+ path.resolve(
+ __dirname,
+ // modify this path to be relative to you webpack config,
+ // "../node_modules/react-native-vector-icons", // <- most common
+ "../../../node_modules/react-native-vector-icons", // <- if using workspaces
+ ),
+ // END - support got react-native-vector-icons
],
loader: require.resolve("babel-loader"),이 프로젝트는 MIT 라이센스에 따라 라이센스가 부여됩니다.
번들 글꼴은 각 저자에 대한 저작권이며 대부분 MIT 또는 SIL OFL하에 있습니다.
