react-native fonts react-native-vector-icons used in the ios
There are a variety of online official website and install and use for ios / android's; can be used, equivalent to the basic installation was successful.
react-native-vector-icons icons divided into several modules, use the time to import FontAwesome from 'react-native-vector-icons / FontAwesome'; in order to use FontAwesome tag, use the tag to specify the name field is an icon .
Project add-dependent:
yarn add react-native-vector-icons
Podfile modify files using CocoaPods for ios install this font libraries:
vim project_dir/ios/Podfile pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons' 在ios目录下执行pod install,使用CocoaPods安装这个依赖
Modify Info.plist, add:
vim project_dir/ios/project_name/Info.plist,添加: <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>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> </array>
Simple and practical
import Icon from 'react-native-vector-icons/Ionicons'; function ExampleView(props) { return <Icon name="ios-person" size={30} color="#4F8EF7" />; } 不同的图标使用名字区分;上例的图标名字(Icon-->name)在[图标名字库](https://oblador.github.io/react-native-vector-icons/)里查找。 在文件node_modules/react-native-vector-icons/glyphmaps/*.json里也可以看到所有图标的名字
Used in android: it is said to add a dependency item (step 1) associated with the next following command can be, to be verified
react-native link react-native-vector-icons