折腾：
【已解决】React Native iOS中使用navbar-native结果加载图标出错：Unrecognized font family ‘Ionicons’
期间，参考：
react-native-vector-icons directory
去用其他的图标，比如：
ios-person或user-o
代码：
left={{ // icon: "ios-person", icon: "user-o", //icon: ‘ios-person-outline’, iconColor: "white", onPress: () => {alert(‘跳转到 个人中心’)} }} |
却都无法正常显示：
Warning Failed prop type Invalid prop name of value user-p supplied to Icon
而此处，之前已经把react-native-vector-icons的所有的ttf字库文件都已经加入到项目中了。
Warning Failed prop type Invalid prop name of value supplied to Icon
javascript – Warning: Failed propType: Invalid prop `component` supplied to `Route` – Stack Overflow
dropdown icon · Issue #927 · Semantic-Org/Semantic-UI-React · GitHub
react-native-vector-icons Warning Failed prop type Invalid prop name
some of the icon can’t display · Issue #274 · oblador/react-native-vector-icons · GitHub
fa-reorder 说是去掉前缀，只用reorder
但是我此处的是：user-o
本身就没有前缀啊。。
Using icons · Issue #323 · oblador/react-native-vector-icons · GitHub
说是要加入导入才可以
此处user-o属于FontAwesome这组图标
所以去试试
import FontAwesome from ‘react-native-vector-icons/FontAwesome’; |
-》此处没法去写成：
<FontAwesome name=’fontawesome-name’ /> <Icon theme={{ iconFamily: ‘FontAwesome’ }} name=’fontawesome-name’ /> |
因为此处用的是：
navbar-native
其自己对于上述icon去封装了一下。。。
后来才看到：
GitHub – redbaron76/navbar-native: a fully customizable navbar component for React-Native
“left / right – (Object or Array of Objects or React component / return function):
icon – (String opt.) – Vector Icon’s icon name
iconFamily – (String def. Ionicons) – Vector Icon’s icon library”
-》默认的icon，是从Ionicons这个组取的，想要其他组的图片，则可以手动指定这个组即可。
诡异的是：
left={{ // icon: "ios-person", icon: "user-o", iconFamily : "FontAwesome", //icon: ‘ios-person-outline’, iconColor: "white", onPress: () => {alert(‘跳转到 个人中心’)} }} |
竟然也错误依旧，user-o图标显示不出来。
fortawesome.github.io/Font-Awesome/icons/
也确认，user-o属于FontAwesome
重新去Xcode中Clean再Build，看看结果
问题依旧。
Use FontAwesome icons in FooterTab · Issue #368 · oblador/react-native-vector-icons · GitHub
然后去试了试：
left={{ // icon: "ios-person", icon: "user-o", iconFamily : ‘FontAwesome’, //icon: ‘ios-person-outline’, iconColor: "white", onPress: () => {alert(‘跳转到 个人中心’)} }} right={[{ icon: "ios-search", iconFamily : ‘FontAwesome’, iconColor: "white", onPress: () => {alert(‘搜索’)} }]} |
结果：
显然，此处的iconFamily的生效的
-》故意制定错误的iconFamily为FontAwesome，所以本来属于Ionicons中的ios-search此处找不到了。
-》难道此处找不到user-o，是因为其他原因？比如此处导入的FontAwesome.ttf中没有包含？
这个user-o是后来新增的？
貌似真是的：
http://fortawesome.github.io/Font-Awesome/icons/
（后来也经过：
GitHub – FortAwesome/Font-Awesome: The iconic font and CSS toolkit
-》
证实了，是4.7.0中更新了user-o的：
“@davegandy Adding user-o, user-circle, and user-circle-o c0b4f9c”
）
那么去换个FontAwesome中的别的图标，试试？
果然，换了个，FontAwesome之前版本就有的：user
代码：
left={{ // icon: "ios-person", //icon: "user-o", //newly added in 4.7 version of FontAwesome icon: "user", iconFamily : ‘FontAwesome’, //icon: ‘ios-person-outline’, iconColor: "white", onPress: () => {alert(‘跳转到 个人中心’)} }} right={[{ icon: "ios-search", iconColor: "white", onPress: () => {alert(‘搜索’)} }]} |
效果：果然可以正常显示了：
-》
所以问题转化为：
如何把此处的FontAwesome.ttf换成最新版本的。
通过：
【记录】如何找到navbar-native中所用到的react-native-vector-icons中的FontAwesome最新4.7版本的ttf文件
然后替换到navbar-native和Xcode后，Xcode中重现Clean后运行，看看是否可以显示出来4.7版本的FontAwesome.ttf中的user-o图标
结果错误依旧。
关闭Xcode，重新拷贝FontAwesome.ttf，重新去试试。
且使用
react-native run-ios
去重新编译链接，看看能否正常。
结果问题依旧。
然后看到：
感觉是：
此处虽然对于navbar-native中的react-native-vector-icons下面的Fonts中的FontAwesome.ttf换成对新版本的了，但是对于FontAwesome.js却还不是最新版，所以可能导致此处navbar-native去调用FontAwesome中，还是找不到user-o
那去尝试去：
把navbar-native中的react-native-vector-icons删除掉，然后重新安装react-native-vector-icons的最新版，看看是否可行。
结果郁闷的是：
npm install react-native-vector-icons —save
➜ node_modules npm install react-native-vector-icons –save [email protected] react-native-vector-icons |
去安装出来的react-native-vector-icons，却只是最新版本的4.0.0的版本
其中的FontAwesome.js中并没有user-o
而github最新的master中是有的：
-》
所以现在需要去：
想办法，如何去安装用npm安装最新的github上面的master版本：
【已解决】如何用npm去install安装github上面某个库的指定版本
然后再去重新试试。
此处，4.0.0的react-native-vector-icons中的FontAwesome.ttf是最新版的4.7.0的：
去Xcode中重现Clean后再编译看看效果。
终于，终于，可以正常显示
最新4.0.0的react-native-vector-icons中的4.7.0版本的FontAwesome.ttf中的新增图标user-o了：
【总结】
此处：
（1）使用默认的navbar-native的话，默认是使用旧版本的react-native-vector-icons，导致其中的FontAwesome.ttf是旧的4.6.3版本，没有包含最新的4.7.0中新增的user-o
（2）另外user-o是属于FontAwesome，但是上述代码中，也没有指定所需要的字符集FontAwesome，其默认加载Ionicons，所以找不到user-o，所以报错。
解决办法是：
1.代码中指定icon的字体组iconFamily为FontAwesome
left={{ // icon: "ios-person", icon: "user-o", //newly added in 4.7 version of FontAwesome // icon: "user", iconFamily : ‘FontAwesome’, //icon: ‘ios-person-outline’, iconColor: "white", onPress: () => {alert(‘跳转到 个人中心’)} }} |
2.确保navbar-native中的react-native-vector-icons是最新的包含了4.7.0的版FontAwesome.ttf的
把之前的navbar-native\node_modules\react-native-vector-icons删除掉，去进入对应文件夹：
navbar-native\node_modules\
重新下载最新的版本的react-native-vector-icons
-》此处经过去官网：
GitHub – oblador/react-native-vector-icons
确认最新版是4.0.0：
所以下载最新的4.0.0:
npm install [email protected] –save |
其中就包含了最新的4.7.0的FontAwesome.ttf
注：
此处按道理来说，react-native-vector-icons最新发布的版本的tag就是4.0.0
但是不知道刚才：
npm install react-native-vector-icons —save
为何却没有下载到最新的版本，所以才去下载指定的最新的4.0.0的版本的。
3.【好像不是必须的？】去把之前Xcode中的旧版本的FontAwesome.ttf换成新版本的
Xcode中-》右击之前加到项目中的FontAwesome.ttf-》Show in Finder-》删除，换成最新的4.7.0版本的FontAwesome.ttf
4.重新编译项目
Xcode中Clean后再去编译和运行，即可：
看到user-o这个图标生效了。
转载请注明：在路上 » 【已解决】ReactNative iOS中使用react-native-vector-icons中的图标无法正常显示：Warning Failed prop type Invalid prop name of value user-p supplied to Icon