折腾:
【已解决】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 react-native-vector-icons@2.1.0 react-native-vector-icons ├── yargs@4.8.1 (decamelize@1.2.0, lodash.assign@4.2.0, get-caller-file@1.0.2, set-blocking@2.0.0, y18n@3.2.1, window-size@0.2.0, which-module@1.0.0, require-main-filename@1.0.1, require-directory@2.1.1, yargs-parser@2.4.1, os-locale@1.4.0, string-width@1.0.2, cliui@3.2.0, read-pkg-up@1.0.1) └── lodash@4.17.4 |
去安装出来的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 react-native-vector-icons@4.0.0 –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