react native vector icons
10.2.0
Erhöhen Sie Ihre nativen reagehörigen Anwendungen mit der Leistung an anpassbarer Vektorsymbole. Ideal für die Verzierung von Schaltflächen, Logos und Navigation oder Registerkartenbalken integrieren diese Symbole nahtlos in Ihre Projekte. Ihre Vielseitigkeit macht Erweiterung und Styling mühelos.
Für die Integration von .svg Dateien nativ können Sie react-native-vector-image untersuchen.
Tipp
Eine neue Version von RNVI kommt in Kürze. Es hat fast ein Null -Konfigurations -Setup. Feedback Willkommen, bitte probieren Sie es in der Monorepo -Filiale aus
Sollten Sie diese Bibliothek vorteilhaft finden, betrachten Sie freundlicherweise die Möglichkeit des Sponserns. Unsere vorgestellten Bemühungen umfassen die Umstrukturierung des Repositorys in eine monorepo -Architektur. In diesem Übergang wird die unabhängige Versionierung von Icon -Sätzen ermöglichen, die Leistung verbessern, die Bündelgröße reduzieren und die Community -Beiträge vereinfachen. Ihr Sponsoring spielt eine entscheidende Rolle bei der Materialisierung dieser Fortschritte.
Erforschen Sie alle Symbole.
AntDesign von Kartellabend ( 298 Ikonen)Entypo von Daniel Bruce (v1.0.1 mit 411 Ikonen)EvilIcons entworfen von Alexander Madyankin & Roman Shamin (V1.10.1 mit 70 Ikonen)Feather erstellt von Cole Bemis & Mitwirkenden (V4.28.0 mit 286 Ikonen)FontAwesome von Dave Gandy (v4.7.0 mit 675 Ikonen)FontAwesome 5 von Fonticons, Inc. (V5.15.3 mit 1598 kostenlosen und 7848 Pro -Icons)FontAwesome 6 entworfen von Fonticons, Inc. (V6.6.0 mit 2016 Free und 16150 Pro -Icons)Fontisto geschaffen von Kenan Gündoğan (V3.0.4 mit 615 Ikonen)Foundation von Zurb, Inc. (v3.0 mit 283 Ikonen)Ionicons die von Ionic hergestellt wurden (V7.1.0 mit 1338 Ikonen)MaterialIcons von Google, Inc. (v4.0.0 mit 2189 Icons)MaterialCommunityIcons von materiadesignicons.com (v6.5.95 einschließlich 6596 Icons)Octicons entworfen von Github, Inc. (v16.3.1 mit 250 Symbolen)Zocial von Sam Collins (v1.4.0 mit 100 Ikonen)SimpleLineIcons von Sabbir & Mitwirkenden (v2.5.5 mit 189 Icons) hergestellt) npm install --save react-native-vector-iconsFühren Sie den folgenden Schritt aus, um die gebündelten Symbole auf iOS zu verwenden:
Führen Sie npx pod-install im iOS-Verzeichnis aus
Info.plist bearbeiten und eine Eigenschaft namens Schriftarten hinzufügen, die von der Anwendung bereitgestellt wird (oder UIAPPFONTs, wenn Xcode AutoComplete nicht funktioniert):
< 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 >Oben Schritt könnte ungefähr so aussehen:
HINWEIS: Neu kompilieren Sie Ihr Projekt nach dem Hinzufügen oder Entfernen von Schriftarten.
Verwenden Sie diese Methode, um das Schriftart Management für Android reibungsloser zu machen:
Bearbeiten Sie android/app/build.gradle (nicht android/build.gradle ) und fügen Sie hinzu:
apply from : file( " ../../node_modules/react-native-vector-icons/fonts.gradle " )Um die kopierten Schriftarten anzupassen, verwenden Sie:
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
Aktualisieren Sie Pfade wie:
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.gradleUm die Bibliothek manuell zu integrieren, befolgen Sie die folgenden Schritte:
Fonts und fügen Sie sie in android/app/src/main/assets/fonts ein (stellen Sie sicher, dass der Ordnername in Kleinbuchstaben, dh fonts ). getImageSource -Unterstützung Die folgenden Schritte sind optional und nur dann erforderlich, wenn Sie die Funktion Icon.getImageSource verwenden möchten.
Bearbeiten Sie die Datei android/settings.gradle wie unten gezeigt:
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') Bearbeiten Sie die android/app/build.gradle (befindet sich im App -Ordner) wie unten gezeigt:
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')
} Bearbeiten Sie Ihre MainApplication.java (tief innerhalb von android/app/src/main/java/... ), wie unten gezeigt (Beachten Sie, dass two Stellen bearbeiten können):
package com.myapp;
+ import com.oblador.vectoricons.VectorIconsPackage;
....
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
+ , new VectorIconsPackage()
);
}Bitte beachten Sie, dass dieser optionale Schritt nur erforderlich ist, wenn Ihre React-native App keine Autoverbindung unterstützt . Andernfalls können Sie das überspringen.
über react-native-macos
Befolgen Sie die folgenden Schritte, um die Bibliothek in Ihrem MacOS-Projekt mit react-native-macos einzurichten:
Durchsuchen Sie den Ordner node_modules/react-native-vector-icons und ziehen Sie den Ordner Fonts in Xcode in Ihr Projekt. Stellen Sie sicher, dass Ihre App unter "Zu den Zielen hinzufügen" überprüft wird, und wählen Sie "Ordnerreferenzen erstellen", wenn Sie aufgefordert werden.
Bearbeiten Sie Ihre Info.plist und fügen Sie eine neue Eigenschaft mit dem Namen Application Fonts Resource Path (oder ATSApplicationFontsPath hinzu, wenn die automatische Vervollständigung von Xcode nicht funktioniert oder Sie Xcode nicht verwenden). Setzen Sie den Wert dieser Eigenschaft auf Fonts .
Aus dem Ordner Ihres Projekts /ios -Ordners:
bundle exec pod install Bitte beachten Sie, dass Sie nach dem Hinzufügen neuer Schriftarten Ihr Projekt neu kompilieren müssen. Stellen Sie außerdem sicher, dass der Ordner Fonts im Abschnitt "Copy Bundle Recessdle" in den Build -Phasen Ihres XCode -Projekts vorhanden ist.
Diese Schritte integrieren die Vektor-Symbollbibliothek effektiv in Ihr MACOS-Projekt und verwenden das react-native-macos -Framework.
über react-native-windows
Befolgen Sie die folgenden Schritte, um die Bibliothek in Ihrem Windows-Projekt mit react-native-windows einzurichten:
Kopieren Sie die Schriftdateien in den obersten Projekten ( /windows/project-name/Assets ).
Öffnen Sie Ihre Lösung in Visual Studio:
A. Klicken Sie mit der rechten Maustaste auf den Ordner Assets in Ihre Lösung. B. Wählen Sie hinzufügen> vorhandenes Element . C. Durchsuchen Sie die Schriftarten, die Sie in /windows/project-name/assets kopiert haben. D. Klicken Sie auf Hinzufügen .
Bitte beachten Sie, dass Sie nach dem Hinzufügen neuer Schriftarten Ihr Projekt neu kompilieren müssen.
Wenn Sie diese Schritte ausführen, integrieren Sie die Vektor-Symbole nahtlos in Ihr Windows-Projekt, wodurch das Framework react-native-windows verwendet wird.
Um eine reag-native mobile App mit react-native-web portieren zu können, müssen Sie nur sicherstellen, dass die Schriftarten auf der Web-App-Seite bekannt sind.
Sie benötigen die Schriftfamilie für jede Schriftart, die Sie verwenden, zu Ihrem CSS
Sie können fehlende Schriftfamilien debuggen, indem Sie beim Debuggen Ihrer Web-App in die Entwicklerkonsole in Ihrem Webbrowser suchen.
Hinweis: Wenn Sie WebPack oder ähnliches verwenden, müssen Sie möglicherweise WebPack so konfigurieren, dass sie das Laden von TTF-Schriftarten unter Verwendung von URL-Lader oder Dateilader verarbeiten. Weitere Informationen finden Sie unter Web -Setup.
In Ihrer App.css oder ähnlichem Fügen Sie die Schriftfamilienspezifikationen hinzu:
@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 */Befolgen Sie die folgenden Schritte, um die Bibliothek mit Ihrem Webprojekt mit Webpack zu integrieren:
Fügen Sie in Ihrer Webpack-Konfigurationsdatei einen Abschnitt hinzu, um TTF-Dateien mithilfe von url-loader oder file-loader zu verarbeiten:
{
test : / .ttf$ / ,
loader : "url-loader" , // or directly file-loader
include : path . resolve ( __dirname , "node_modules/react-native-vector-icons" ) ,
}Konsumieren Sie in Ihrem JavaScript -Einstiegspunkt die Schriftart Dateien und geben Sie das erforderliche Stil -Tag ein:
// 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 ) ;Wenn Sie diese Schritte ausführen, integrieren Sie die Vektor -Symbollbibliothek nahtlos mit WebPack in Ihr Webprojekt, sodass Sie die Symbole in Ihrer Webanwendung mühelos verwenden können.
Das Upgrade dieses Pakets erfordert häufig, dass auch die mit Ihren Projekten verknüpften Schriftdateien aktualisiert werden. Wenn die automatische Verknüpfung für Sie funktioniert, sollte das Ausführen der Schriftarten erneut aktualisiert werden. Andernfalls müssen Sie die im Abschnitt Installationsabschnitt beschriebenen Schritte ausführen.
IconSie können entweder eines der gebündelten Symbole oben verwenden oder Ihre eigene benutzerdefinierte Schriftart rollen.
import Icon from 'react-native-vector-icons/FontAwesome' ;
const myIcon = < Icon name = "rocket" size = { 30 } color = "#900" / > ;Jede Texteigenschaft und die folgenden:
| Stütze | Beschreibung | Standard |
|---|---|---|
size | Die Größe des Symbols kann auch als fontSize im Stilobjekt übergeben werden. | 12 |
name | Welches Symbol anzeigen, siehe Icon Explorer App oder eine der obigen Links. | Keiner |
color | Farbe des Symbols. | Geerbt |
| Stütze | Beschreibung |
|---|---|
getFontFamily | Gibt die Schriftfamilie zurück, mit der Symbole als Text abgerufen werden. Verwendung: const fontFamily = Icon.getFontFamily() |
getImageSource | Gibt ein Versprechen zurück, das auf die Quelle einer Bitmap -Version des Symbols zur Verwendung mit Image et al. Verwendung: const source = await Icon.getImageSource(name, size, color) |
getImageSourceSync | Gleich wie getImageSource , aber synchron. Verwendung: const source = Icon.getImageSourceSync(name, size, color) |
getRawGlyphMap | Gibt die rohe Glyphenkarte des Symbolsatzes zurück. Verwendung: const glyphMap = Icon.getRawGlyphMap() |
hasIcon | Überprüft, ob der Name im aktuellen Symbolsatz gültig ist. Verwendung: const isNameValid = Icon.hasIcon(name) |
Da Icon auf der Text aufgebaut sind, funktionieren die meisten Stileigenschaften wie erwartet, dass es nützlich ist, mit diesen herumzuspielen:
backgroundColorborderWidthborderColorborderRadiuspaddingmargincolorfontSize HINWEIS: Auf Android Text unterstützt derzeit keine border* -Stile, um dieses Icon einfach mit einer View einzuwickeln.
Durch die Kombination einiger von diesen können Sie zum Beispiel erstellen:
Icon.Button -KomponenteEine Komfortkomponente zum Erstellen von Schaltflächen mit einem Symbol auf der linken Seite.
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 >
) ; Jedes Text , TouchableHighlight oder TouchableWithoutFeedback -Eigenschaft zusätzlich zu diesen:
| Stütze | Beschreibung | Standard |
|---|---|---|
color | Text- und Symbolfarbe, verwenden Sie iconStyle oder nisten Sie eine Text , wenn Sie unterschiedliche Farben benötigen. | white |
size | Symbolgröße. | 20 |
iconStyle | Nur für das Symbol angewandte Stile, gut zum Festlegen von Rändern oder einer anderen Farbe. Hinweis: Verwenden Sie iconStyle für Ränder oder erwarten Sie ein instabiles Verhalten. | {marginRight: 10} |
backgroundColor | Hintergrundfarbe der Schaltfläche. | #007AFF |
borderRadius | Randradius der Taste, auf 0 gesetzt, um zu deaktivieren. | 5 |
onPress | Eine Funktion, die aufgerufen wird, wenn die Taste gedrückt wird. | Keiner |
Bequeme Möglichkeit, dies in andere Komponenten einzuschließen, die eher auf Bitmap -Bildern als auf skalierbare Vektorsymbole angewiesen sind. Nimmt den name , size und color der Argumente wie oben beschrieben.
Icon . getImageSource ( 'user' , 20 , 'red' ) . then ( source =>
this . setState ( { userIcon : source } )
) ; Alternativ können Sie das synchrone Icon.getImageSourceSync verwenden. Denken Sie daran, dass diese Methode blockiert und möglicherweise Leistungsstrafen entspricht. Nachfolgende Anrufe verwenden jedoch Cache.
Einige Schriftarten verwenden heute mehrere Stile, FontaWesome 5 zum Beispiel, was von dieser Bibliothek unterstützt wird. Die Nutzung entspricht der Standard Icon ziemlich genau:
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 Alle statischen Methoden von Icon werden von Schriftarten mit mehreren Stilen unterstützt.
| Stütze | Beschreibung |
|---|---|
getFontFamily | Gibt die Schriftfamilie zurück, mit der Symbole als Text abgerufen werden. Verwendung: const fontFamily = Icon.getFontFamily(style) |
getImageSource | Gibt ein Versprechen zurück, das auf die Quelle einer Bitmap -Version des Symbols zur Verwendung mit Image et al. Verwendung: const source = await Icon.getImageSource(name, size, color) |
getImageSourceSync | Gleich wie getImageSource , aber synchron. Verwendung: const source = Icon.getImageSourceSync(name, size, color) |
getRawGlyphMap | Gibt die rohe Glyphenkarte des Symbolsatzes zurück. Verwendung: const glyphMap = Icon.getRawGlyphMap(style) |
hasIcon | Überprüft, ob der Name im aktuellen Symbolsatz gültig ist. Verwendung: const isNameValid = Icon.hasIcon(name, style) |
getStyledIconSet | Verwenden Sie dies, um eine Icon für einen einzelnen Stil zu erhalten. Verwendung. const StyledIcon = Icon.getStyledIconSet(style) |
Wenn kein Stilargument übergeben wird (oder wenn es ungültig ist), werden die Methoden standardmäßig einen vordefinierten Fallback.
Icon.Button wird unterstützt, die Verwendung ist genau wie 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]) Gibt Ihre eigene benutzerdefinierte Schriftart basierend auf der glyphMap zurück, in der der Schlüssel der Symbolname ist und der Wert entweder ein UTF-8-Zeichen oder ein Zeichencode ist. fontFamily ist der Name der Schriftart, nicht der Dateiname. Öffnen Sie die Schriftart in Schriftbuch.App oder ähnlich, um den Namen zu lernen. Bestehen Sie optional das dritte fontFile -Argument für Android -Unterstützung über, es sollte der benutzerdefinierte Schriftart -Dateiname sein.
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]]) Convenience -Methode zum Erstellen einer benutzerdefinierten Schriftart basierend auf einer Fontello -Konfigurationsdatei. Vergessen Sie nicht, die Schriftart wie oben beschrieben zu importieren und die config.json an einem in Ihrem Projekt bequemen Ort fallen zu lassen.
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'
) ; Stellen Sie sicher, dass Sie die Option Download in iComoon verwenden, und verwenden Sie die .json -Datei, die in dem von Ihnen heruntergeladenen .zip enthalten ist. Sie müssen auch die .ttf -Schriftdatei in Ihr Projekt importieren, wobei Sie den obigen Anweisungen folgen.
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 / >| Option | Beschreibung | Standard |
|---|---|---|
| Standardstyle | Der Name des zu verwendenden Stils, wenn während des Renders kein Stil geliefert wird. | Object.keys(styles)[0] |
| Fallbackfamilie | Funktion zur Auswahl einer Familie, wenn eine Glyphe nicht verfügbar ist. Die Funktion sollte den name der Glyphe als Parameter akzeptieren. Gibt den Namen zurück, wenn die Familie. | (name) => Object.keys(styles)[0] |
| Glyphvalidator | Funktion zur Überprüfung, ob eine Glyphe für einen gewählten Stil verfügbar ist. Es hat name und style als Parameter in dieser Reihenfolge. Gibt true zurück, wenn der Glyphe gültig oder false ist, wenn dies nicht der Fall ist. | (name, style) => true |
Sie müssen manuell eine Referenz Ihres .ttf in Ihrem XCodeProj Resources und in Info.plist machen.
React Native verfügt über eine erstaunliche Animationsbibliothek namens Animated . Um es mit einem Symbol zu verwenden, erstellen Sie einfach eine animierte Komponente mit dieser Zeile: const AnimatedIcon = Animated.createAnimatedComponent(Icon) . Sie können auch die Animationsbibliothek auf höherer Ebene reagieren nativ-animatable verwenden.
Probieren Sie das IconExplorer -Projekt in Examples/IconExplorer -Ordner aus. Dort können Sie auch nach jedem Symbol suchen.
import Icon from 'react-native-vector-icons/Ionicons' ;
function ExampleView ( props ) {
return < Icon name = "ios-person" size = { 30 } color = "#4F8EF7" / > ;
} Da TabBarIOS zugunsten von @react-navigation/boden-tabs aus dem Kern entfernt wurde, wird es auch als Convenience-Komponente aus dieser Bibliothek entfernt. Verwenden Sie stattdessen einfach das Icon , aber vergessen Sie nicht, dieses Projekt wie oben beschrieben zu importieren und zu verlinken.
Im Folgenden finden Sie ein Beispiel aus 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 >
) ;
} Da ToolbarAndroid aus dem Kern entfernt wurde, wird es auch als Komfortkomponente aus dieser Bibliothek entfernt. Verwenden Sie stattdessen einfach getImageSourceSync , aber vergessen Sie nicht, dieses Projekt wie oben beschrieben zu importieren und zu verknüpfen.
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 >
) ;
} Wenn Sie bereits über eine Symbolschrift mit der zugehörigen CSS-Datei verfügen, können Sie problemlos ein Symbol mit dem Skript generate-icon Skript generieren.
./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon > Components/MyIcon.js
Alle unten nicht aufgeführten Flaggen, wie --componentName und --fontFamily , werden an die Vorlage weitergegeben.
-p , --prefixCSS Selector Prefix [Standard: ".icon-"]
-t , --templateVorlage im JS -Vorlagen -Zeichenfolgenformat [Standard: "./Template/iconset.tpl"]
Für die Standardvorlage geben Sie bitte --componentName und --fontFamily an.
-o , --outputSpeichern Sie die Ausgabe in Datei, standardmäßig in STDOut
android/app/src/main/assets/fonts kopiert haben.rm -rf android/app/build ..ttf in Ihrem XCodeProj Resources manuell hinzugefügt haben.Info.plist angezeigt werden. Wenn Sie den gesamten Ordner hinzugefügt haben und es blau ist, müssen Sie ihn dem Pfad hinzufügen.rm -rf ios/build Sowohl NPM- als auch Android -Dateihierarchien werden in der Regel sehr tief und noch schlimmer, wenn Sie sie kombinieren. Da das Windows-Dateisystem eine maximale Länge hat, führen Langdateiname-Adressen zu zahlreichen Fehlern, einschließlich Execution failed for task ':react-native-vector-icons:processReleaseResources' . Versuchen Sie also, den Pfad zu Ihrem Projektordner so kurz wie möglich zu halten.
Sie haben die Schriftdateien wahrscheinlich nicht aktualisiert, die nach dem Upgrade mit Ihrem nativen Projekt verknüpft sind. Dies gilt jedoch nur für Android -Ziele, da iOS beim Erstellen der App die Schriftarten bündelt (versuchen Sie, Ihren Build von XCode aus zu reinigen, wenn das Problem besteht). Auf Android können Sie das Projekt neu verknüpfen oder die Schriftarten manuell aktualisieren. Um sie automatisch zu synchronisieren, verwenden Sie den Gradle -Ansatz.
Manchmal beschließt Anbieter, einige Symbole aus neueren Veröffentlichungen zu entfernen. Dies hat nichts mit diesem Paket zu tun. Wenn Sie auf eine ältere Version einer Schriftart angewiesen sind, können Sie sie als benutzerdefinierte Schriftart hinzufügen.
Sie versuchen wahrscheinlich, gleichzeitig @expo/vector-icons und react-native-vector-icons zu verwenden. Das Expo -Paket aliasist diesen und wird Vorrang haben. Verwenden Sie nur eine dieser Bibliotheken in Ihrem Projekt.
Sie müssen Ihre Transpiler react-native-vector-icons Konfiguration z.
Zum Beispiel müssen Sie react-native-vector-icons hinzufügen, um JSX (bei Verwendung von WebPack) den relativen Pfad hinzufügen, um den Relativpfad zum react-native-vector-icons im Abschnitt Ihrer JSX-Konfiguration hinzuzufügen.
Dies sieht möglicherweise nach Folgendes aus, wenn Sie Babel in WebPack verwenden:
// 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"),Dieses Projekt ist unter der MIT -Lizenz lizenziert.
Alle gebündelten Schriftarten sind urheberrechtlich geschützt für ihre jeweiligen Autoren und hauptsächlich unter MIT oder SIL OFL.
