最新消息:VPS服务器又从fzhost.net换回Linode了,主题仍用朋友推荐的大前端D8

【已解决】ReactNative iOS中使用react-native-vector-icons中的图标无法正常显示:Warning Failed prop type Invalid prop name of value user-p supplied to Icon

React Native iOS crifan 761浏览 0评论

折腾:

【已解决】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

Warning: Failed propType: Invalid prop `icon` of type `object` supplied to `t`, expected `string`. · Issue #252 · acdlite/redux-router · GitHub

Warning: Failed propType: Invalid prop `type` of value `ThemeAttrAndroid` supplied to `TochableNativeFeedback`, expected one of ["RippleAndroid"] · Issue #5515 · facebook/react-native · GitHub

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

-》

v4.7.0 GitHub pull request

证实了,是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

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
13 queries in 0.225 seconds, using 10.19MB memory